/* ============================================================
   theme.css — Neighborly Portal design system
   ------------------------------------------------------------
   Single source of truth for everything visual:
   - Design tokens (colors, type, spacing, radii, shadows)
   - Base layout primitives (body, main, page-header, footer)
   - Reusable components (nav, hub dropdown, tabs, cards,
     buttons, pills, tiles)

   This file replaces both the page-specific <style> blocks and
   the legacy skin-upgrade.css overlay. Every page on the portal
   loads ONLY this stylesheet and uses these tokens/components.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@400;500&family=Jost:wght@500;600;700&display=swap');

@font-face {
  font-family: 'TAYAmaya';
  src: url('fonts/TAYAmaya.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Tuppence';
  src: url('fonts/TuppenceVariable.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Telegraf';
  src: url('fonts/TelegrafRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura PT Demi';
  src: url('FuturaPTDemi.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* — Brand palette — */
  --brand-yellow:  #eace49;
  --brand-yellow-light: #fdf7d8;
  --brand-yellow-deep:  #b89a00;
  --brand-green:   #7bbd91;
  --brand-green-light:  #e4f5ea;
  --brand-green-deep:   #2a7a4b;
  --brand-orange:  #e87142;
  --brand-orange-light: #fdeee7;
  --brand-orange-deep:  #a32d2d;
  --brand-blue:    #6280bd;
  --brand-blue-light:   #eaeef8;
  --brand-blue-deep:    #2d4480;
  --brand-lavender:    #cbc9d6;
  --brand-lavender-light: #f0eff5;
  --brand-lavender-deep:  #5a4a7a;
  --brand-tan:     #dbc6a2;
  --brand-tan-light:    #f7f0e4;
  --brand-tan-deep:     #9c7a3c;

  /* — Neutrals — */
  --ink:        #1f2328;
  --ink-pure:   #000;
  --cream:      #F7F6F3;       /* page bg */
  --cream-warm: #fffdf7;       /* lifted surfaces (active tab, dropdown bg) */
  --surface:    #ffffff;       /* cards */
  --surface-2:  #F0EEE9;       /* nested surfaces, hover */
  --line:       rgba(31,35,40,0.06);   /* hairline */
  --line-strong:rgba(31,35,40,0.10);   /* card border, settings btn */
  --line-bold:  rgba(31,35,40,0.18);   /* hover border */

  --text:       #1f2328;
  --text-2:     #3a3d44;
  --text-3:     #7a7770;
  --text-mute:  #c0bdb7;

  /* — Sentiment / status — */
  --pos: var(--brand-green-deep);
  --neg: var(--brand-orange-deep);
  --neu: var(--brand-yellow-deep);

  /* — Type families — */
  --f-display:  'TAYAmaya', 'DM Sans', sans-serif;
  --f-amp:      'Tuppence', serif;
  --f-eyebrow:  'Futura PT Demi', 'Jost', 'futura-pt', 'Futura', sans-serif;
  --f-sans:     'DM Sans', sans-serif;
  --f-mono:     'DM Mono', monospace;

  /* — Type scale — */
  --t-hero:        clamp(28px, 3.4vw, 44px);   /* page H1 / TAYAmaya */
  --t-section:     clamp(22px, 2.4vw, 32px);   /* section H2 */
  --t-card-title:  15px;                       /* card title */
  --t-body:        14px;                       /* body */
  --t-body-sm:     13px;
  --t-caption:     12px;
  --t-caption-sm:  11px;
  --t-eyebrow:     11px;                       /* all-caps eyebrow */
  --t-meta:        10.5px;
  --t-mono-lg:     22px;                       /* big numbers */

  /* — Spacing — */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 88px;

  /* — Radii — */
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  22px;
  --r-pill: 100px;
  --r-round:999px;

  /* — Elevation — */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.14);
  --shadow-orange: 0 4px 14px rgba(232,113,66,0.28);

  /* — Layout — */
  --content-max: 1240px;
  --nav-h: 68px;
  --nav-h-mobile-row: 56px;
  /* Single gutter used by nav, main, dashboard, page-header so left edges line up at every viewport */
  --gutter: clamp(var(--s-4), 4vw, var(--s-7));

  /* — Motion — */
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s;
  --t-base: 0.2s;
  --t-slow: 0.35s;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { min-height: 100vh; }

body {
  font-family: var(--f-sans);
  font-size: var(--t-body);
  color: var(--text);
  background: var(--cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font-family: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* The Tuppence ampersand — only used inside TAYAmaya headings */
.amp {
  font-family: var(--f-amp);
  font-weight: 500;
  font-style: normal;
  font-size: 1.05em;
  margin: 0 0.04em;
  vertical-align: baseline;
}

/* Letter-spacing trim — for centering wide-tracked text accurately */
.track-trim { display: inline-block; margin-right: -0.34em; }

/* ============================================================
   NAV (canonical chrome — same on every page)
   ============================================================ */
.np-nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h); min-height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--s-3);
  padding-left: max(var(--gutter), calc(50% - var(--content-max) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc(50% - var(--content-max) / 2 + var(--gutter)));
  background: rgba(253, 251, 246, 0.78);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.np-nav .np-nav-brand { justify-self: start; grid-column: 1; }
.np-nav .np-tabs      { justify-self: center; grid-column: 2; }
.np-nav .np-nav-right { justify-self: end; grid-column: 3; }

.np-nav-brand {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  padding: 6px 0; border-radius: var(--r-md);
  transition: background var(--t-base) var(--easing);
}
.np-nav-brand:hover { background: transparent; }
.np-nav-brand img { height: 22px; width: auto; display: block; }
.np-nav-brand .chev {
  display: none;
  width: 10px; height: 10px; color: var(--text-3);
  transition: transform var(--t-base) var(--easing);
}
.np-nav-brand.open .chev,
.np-nav-brand[aria-expanded="true"] .chev { transform: rotate(180deg); }
.np-nav-brand.open .chev { transform: rotate(180deg); }

.np-tabs {
  display: inline-flex; gap: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.np-tabs::-webkit-scrollbar { display: none; }
.np-tab {
  position: relative;
  padding: 5px 12px;
  border: none; background: none; cursor: pointer;
  border-radius: 0;
  font-family: var(--f-sans);
  font-size: var(--t-caption);
  font-weight: 500; color: var(--text-3); white-space: nowrap;
  line-height: 1.4;
  transition: color var(--t-base) var(--easing);
}
.np-tab::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 1.5px; background: transparent; border-radius: 1px;
  transition: background var(--t-base) var(--easing);
}
.np-tab:hover { color: var(--text); }
.np-tab.is-active {
  background: transparent; color: var(--text);
  box-shadow: none;
}
.np-tab.is-active::after { background: var(--ink); }

/* Legacy .nav-tab (dashboard / guests inline classes) → match the
   underline treatment so the tab bar reads identically on every page. */
.nav-tab { position: relative; }
.nav-tab::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 1.5px; background: transparent; border-radius: 1px;
  transition: background var(--t-base) var(--easing);
}
.nav-tab.active::after,
.nav-tab.is-active::after { background: var(--ink); }

/* Right cluster — date chip, refresh, settings, back */
.np-nav-right {
  display: flex; align-items: center; gap: var(--s-2);
  flex-shrink: 0;
}

.np-icon-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none; border-radius: var(--r-md);
  color: var(--text); cursor: pointer; flex-shrink: 0;
  transition: background var(--t-base) var(--easing), color var(--t-base) var(--easing);
}
.np-icon-btn:hover { background: rgba(31,35,40,0.06); color: var(--text); }
.np-icon-btn svg { width: 14px; height: 14px; }

/* Floating settings — pinned to the bottom-left of every page so the
   nav stays uncluttered. Marks itself by title="Settings". */
.np-icon-btn[title*="ettings"],
.np-icon-btn[aria-label*="ettings"],
.settings-btn {
  position: fixed !important;
  bottom: 18px; left: 18px;
  z-index: 90;
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-md);
  color: var(--text-2);
}
.np-icon-btn[title*="ettings"]:hover,
.np-icon-btn[aria-label*="ettings"]:hover,
.settings-btn:hover { background: var(--surface-2) !important; color: var(--text); }
.np-icon-btn[title*="ettings"] svg,
.np-icon-btn[aria-label*="ettings"] svg,
.settings-btn svg { width: 16px !important; height: 16px !important; }

/* Page name tag in nav-right — small eyebrow that labels each page.
   On web the caps sit slightly low against the lowercase tab labels
   because Futura PT Demi's cap-height is centered in a line-box that's
   slightly taller than the cap itself; the half-leading at top is
   thicker than at bottom, pushing the visible glyph down. Trim it with
   a small negative margin-top. */
.np-nav-page-tag {
  display: inline-flex; align-items: center;
  height: 28px;
  font-family: var(--f-eyebrow); font-weight: 600;
  font-size: var(--t-eyebrow); letter-spacing: 0.22em; line-height: 1;
  text-transform: uppercase; color: var(--text-2);
  white-space: nowrap; padding: 0 var(--s-2);
  margin-top: -2px;
}

.np-date-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(31,35,40,0.04);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-family: var(--f-mono);
  font-size: var(--t-caption);
  user-select: none; white-space: nowrap;
}
.np-date-chip svg { opacity: 0.7; }

/* ============================================================
   HUB DROPDOWN (opens off the brand mark)
   ============================================================ */
.np-hub-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(31,35,40,0.18);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--easing);
}
.np-hub-overlay.is-open { opacity: 1; pointer-events: auto; }

.np-hub {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% - 6px));
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  z-index: 120;
  padding: var(--s-5);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xl);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--easing), transform var(--t-base) var(--easing);
}
.np-hub.is-open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }

.np-hub-label {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--f-eyebrow); font-weight: 600;
  font-size: var(--t-eyebrow); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: var(--s-3);
}
.np-hub-back-home {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-sans); font-weight: 500;
  font-size: 11px; letter-spacing: 0; text-transform: none;
  color: var(--text-2); text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--line-strong); border-radius: 7px;
  background: var(--surface-2);
  white-space: nowrap;
  transition: background var(--t-base) var(--easing), color var(--t-base) var(--easing);
}
.np-hub-back-home:hover { background: var(--surface); color: var(--text); }

.np-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.np-hub-card {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base) var(--easing), border-color var(--t-base) var(--easing), transform var(--t-base) var(--easing);
}
.np-hub-card:hover { transform: translateY(-1px); background: var(--surface-2); border-color: var(--line-bold); }
.np-hub-card.is-active {
  background: var(--surface);
  border-color: var(--ink);
}
.np-hub-card-ico {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.np-hub-card-ico svg { width: 14px; height: 14px; }
.np-hub-card-title { font-size: var(--t-card-title); font-weight: 600; line-height: 1.2; color: var(--text); }
.np-hub-card-sub   { font-size: var(--t-caption); color: var(--text-3); line-height: 1.35; }

/* ============================================================
   PAGE LAYOUT — main + headers
   ============================================================ */
.np-main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-6) var(--gutter) var(--s-8);
}

.np-page-header {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s-2);
  padding-bottom: var(--s-5);
  text-align: left;
}
.np-page-eyebrow {
  font-family: var(--f-eyebrow); font-weight: 600;
  font-size: var(--t-eyebrow); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-3);
}
.np-page-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--t-hero);
  line-height: 1.05; letter-spacing: -0.005em;
  color: var(--ink-pure);
}
.np-page-meta {
  font-size: var(--t-body-sm); color: var(--text-3); line-height: 1.5;
}

/* Header controls row sits under the title block, never beside it */
.np-page-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3);
}

/* ------------------------------------------------------------
   Canonical page-header row — title left, controls stacked right.
   <div class="np-page-header-row">
     <header class="np-page-header"> eyebrow + title </header>
     <div class="np-page-selectors"> date-pill / location toggle </div>
   </div>
   ------------------------------------------------------------ */
.np-page-header-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  flex-wrap: wrap;
}
/* helper for header rows that sit at top-level (not wrapped in .np-main) */
.np-main-padded {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: var(--s-6);
}
.np-page-header-row > .np-page-header {
  flex: 0 1 auto;
  min-width: 0;
  padding-bottom: 0;
}
/* Selectors always come first visually so the date pill is leftmost */
.np-page-header-row > .np-page-selectors { order: -1; }
.np-page-selectors {
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  flex-shrink: 0;
  margin-top: var(--s-2);
}
.np-page-selectors > * { flex-shrink: 0; }
@media (max-width: 720px) {
  .np-page-header-row { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .np-page-selectors { align-items: flex-start; margin-top: 0; }
}

/* ============================================================
   CARDS — KPI, full-width, source/breakdown
   ============================================================ */
.np-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-4) var(--s-5);
}
.np-card-title  { font-size: var(--t-card-title); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.np-card-sub    { font-size: var(--t-caption); color: var(--text-3); margin-bottom: var(--s-3); }

.np-kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3);
  margin-bottom: var(--s-5);
}
@media (max-width: 900px) { .np-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .np-kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--s-2); } }

.np-kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.np-kpi-label  { font-family: var(--f-eyebrow); font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.np-kpi-value  { font-family: var(--f-mono); font-weight: 600; font-size: 26px; letter-spacing: -0.04em; color: var(--ink); line-height: 1; margin: 0 0 6px; }
.np-kpi-sub    { font-size: var(--t-caption-sm); color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; line-height: 1.35; }

/* ============================================================
   BUTTONS + PILLS (unified)
   ============================================================ */
.np-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px;
  background: var(--brand-lavender); color: var(--ink);
  border: none; border-radius: var(--r-round);
  font-family: var(--f-eyebrow); font-weight: 600;
  font-size: var(--t-caption); letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-base) var(--easing), transform var(--t-base) var(--easing), box-shadow var(--t-base) var(--easing);
}
.np-btn:hover { transform: translateY(-1px); background: #b9b7c8; }
.np-btn.is-primary {
  background: var(--brand-orange); color: #fff;
  box-shadow: 0 4px 12px rgba(232,113,66,0.18);
}
.np-btn.is-primary:hover {
  background: #d96538;
  box-shadow: var(--shadow-orange);
}

.np-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-base) var(--easing), color var(--t-base) var(--easing), border-color var(--t-base) var(--easing);
}
.np-pill:hover { color: var(--text); }
.np-pill.is-active {
  background: var(--cream-warm); color: var(--text);
  border-color: var(--line-bold);
  box-shadow: var(--shadow-sm);
}

.np-date-pill,
.date-pill,
.week-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: var(--brand-orange); color: #fff;
  border: none; border-radius: var(--r-pill);
  font-family: var(--f-sans); font-weight: 500; font-size: var(--t-caption);
  line-height: 1; white-space: nowrap;
  cursor: pointer;
  transition: filter var(--t-base) var(--easing);
}
.np-date-pill:hover,
.date-pill:hover,
.week-badge:hover { filter: brightness(1.06); }
.np-date-pill svg,
.date-pill svg,
.week-badge svg { width: 12px; height: 12px; }

/* Toggle group — Edit/Present, Month/Week — matches .np-tabs thin size */
.np-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border-radius: var(--r-pill);
}
.np-toggle button,
.np-toggle a {
  padding: 5px 14px;
  background: transparent; border: none; cursor: pointer;
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: var(--t-caption);
  font-weight: 500; color: var(--text-2);
  text-decoration: none; line-height: 1.4;
  transition: background var(--t-base) var(--easing), color var(--t-base) var(--easing), box-shadow var(--t-base) var(--easing);
}
.np-toggle button:hover, .np-toggle a:hover { color: var(--text); }
.np-toggle button.is-active,
.np-toggle a.is-active {
  background: var(--brand-orange); color: #fff;
  box-shadow: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.np-foot {
  padding: var(--s-7) 0 var(--s-6);
  text-align: center;
  font-family: var(--f-eyebrow); font-weight: 600;
  font-size: var(--t-caption);
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--text-3); opacity: 0.7;
}

/* ============================================================
   RESPONSIVE — MOBILE NAV (two-row grid)
   ============================================================ */
@media (max-width: 768px) {
  :root { --nav-h: auto; }

  .np-nav {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 10px; row-gap: 8px;
    padding: 10px var(--s-4) 0 var(--s-4);
    height: auto; min-height: auto;
  }
  .np-nav-brand     { grid-column: 1 / 2; grid-row: 1 / 2; justify-self: start; }
  .np-nav-brand img { height: 22px; }
  .np-nav-right     { grid-column: 2 / 4; grid-row: 1 / 2; justify-self: end; }

  .np-tabs {
    grid-column: 1 / -1; grid-row: 2 / 3;
    margin: 0 calc(var(--s-4) * -1);
    padding: 6px var(--s-4);
    background: rgba(247,244,235,0.55);
    border-top: 1px solid var(--line);
    border-radius: 0;
    gap: 2px;
    justify-content: flex-start;
    width: auto;
  }
  .np-tab { padding: 7px 14px; }

  .np-icon-btn { width: 30px; height: 30px; }
  .np-icon-btn svg { width: 13px; height: 13px; }

  .np-date-chip { padding: 6px 10px; font-size: var(--t-caption-sm); }

  .np-main {
    padding: var(--s-5) var(--s-4) var(--s-7);
  }
  .np-page-header { padding-bottom: var(--s-4); }
  .np-page-title  { font-size: clamp(24px, 6vw, 32px); }

  .np-hub-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LEGACY ALIASES
   Class names dynamically rendered by existing page JS, mapped
   to the same tokens as the np-* components. Keeps the chart /
   filter / drawer rendering intact while letting the system
   look like one design language.
   ============================================================ */
.full-card, .source-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-4) var(--s-5);
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.kpi-label { font-family: var(--f-eyebrow); font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.kpi-value { font-family: var(--f-mono); font-weight: 500; font-size: var(--t-mono-lg); color: var(--ink); line-height: 1.1; margin: 6px 0 4px; }
.kpi-foot  { font-family: var(--f-mono); font-size: var(--t-meta); color: var(--text-3); margin-top: 6px; }
.chart-source {
  font-family: var(--f-mono); font-size: var(--t-meta);
  color: var(--text-3); margin-top: var(--s-3);
  padding-top: var(--s-2); border-top: 0.5px solid var(--line);
}
.kpi-sub   { font-size: var(--t-caption-sm); color: var(--text-3); }

.card-title { font-size: var(--t-card-title); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.card-sub   { font-size: var(--t-caption); color: var(--text-3); margin-bottom: var(--s-3); }

/* Auto-fill the row regardless of card count — kpi-grid stretches to
   match the width of the chart-grid below it (was forced to 5 columns
   even when only 4 cards rendered, leaving an empty column on the right). */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
@media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
@media (max-width: 640px)  { .kpi-grid { grid-template-columns: 1fr 1fr; } }

/* Page header (legacy class kept in markup for JS) inherits np-page-header layout */
.guest-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.guest-title  { font-family: var(--f-display); font-weight: 400; font-size: var(--t-hero); line-height: 1.05; letter-spacing: -0.005em; color: var(--ink-pure); }
.guest-sub    { font-family: var(--f-eyebrow); font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-3); }

.guest-header-controls { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
/* Grouped sub-page toggles (date preset / location filter / trend range) —
   match the .np-toggle visual: grey track with orange active pill. */
.date-preset-group, .loc-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border-radius: var(--r-pill);
  flex-shrink: 0;
}
.dp-btn, .lt-btn, .tr-btn {
  padding: 5px 12px; border: none; border-radius: var(--r-pill);
  background: transparent; font-size: var(--t-caption); font-weight: 500;
  color: var(--text-2); cursor: pointer;
  transition: background var(--t-base) var(--easing), color var(--t-base) var(--easing);
}
.dp-btn:hover, .lt-btn:hover, .tr-btn:hover { color: var(--text); }
.dp-btn.active, .lt-btn.active, .tr-btn.active {
  background: var(--brand-orange); color: #fff;
  border-color: transparent; box-shadow: none;
}
.date-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-orange); color: #fff;
  font-family: var(--f-sans); font-size: var(--t-caption); font-weight: 500;
  padding: 6px 14px; border-radius: var(--r-pill);
  border: none; cursor: pointer; white-space: nowrap;
  transition: filter var(--t-base) var(--easing);
}
.date-pill:hover { filter: brightness(1.06); }

/* Sentiment pills (used inside drawers, theme rows) */
.pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--t-caption-sm); font-weight: 500; }
.pill-neg { background: var(--brand-orange-light); color: var(--brand-orange-deep); }
.pill-pos { background: var(--brand-green-light); color: var(--brand-green-deep); }

.review-card, .quote-card {
  background: var(--surface-2); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 8px;
  border-left: 3px solid transparent;
  font-size: var(--t-body-sm); color: var(--text-2); line-height: 1.55;
}

/* The dashboard / page mount points */
.page { display: none; padding: var(--s-5) clamp(var(--s-4), 4vw, var(--s-7));
        max-width: var(--content-max); margin: 0 auto; }
.page.active { display: block; }

/* ============================================================
   BRAND PAGE — section / overview cell / palette / type aliases
   So the brand book section layouts inherit the same tokens.
   ============================================================ */
.hero          { padding-top: clamp(48px, 7vh, 88px); padding-bottom: 28px; }
.hero-title    { font-family: var(--f-display); font-weight: 400; font-size: var(--t-hero); line-height: 1.05; letter-spacing: -0.005em; color: var(--ink-pure); margin-bottom: var(--s-3); }
.hero-title .accent { color: var(--ink-pure); font-family: inherit; font-weight: inherit; font-style: normal; text-transform: none; }
.hero-eyebrow  { font-family: var(--f-eyebrow); font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-2); }
.hero-sub      { font-family: var(--f-sans); font-size: var(--t-body); color: var(--text-2); max-width: 720px; line-height: 1.6; }
.hero-meta     { margin-top: var(--s-5); font-family: var(--f-eyebrow); font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-3); }

section.row    { padding: var(--s-7) 0; gap: var(--s-6); }
.row-title     { font-family: var(--f-display); font-weight: 400; font-size: var(--t-section); line-height: 1.05; letter-spacing: -0.005em; color: var(--ink-pure); }
.row-num       { font-family: var(--f-eyebrow); font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-3); }
.row-num span  { color: var(--brand-orange); margin-right: 8px; }
.row-desc      { font-size: var(--t-body-sm); color: var(--text-2); line-height: 1.6; }

.quick-cell    { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); transition: background var(--t-base) var(--easing), border-color var(--t-base) var(--easing), transform var(--t-base) var(--easing); }
.quick-cell:hover { background: var(--cream-warm); border-color: var(--line-bold); transform: translateY(-1px); }
.quick-cell.feature { background: var(--surface); color: var(--ink); }
.quick-cell.feature .quick-name  { color: var(--ink); }
.quick-cell.feature .quick-arrow { color: var(--text-3); }
.quick-cell.feature .quick-num   { color: var(--text-3); }
.quick-cell.feature .quick-dot   { background: var(--brand-orange); }
.quick-cell.feature:hover        { background: var(--cream-warm); }

.swatch-name   { font-family: var(--f-display); font-size: 15px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.swatch-chip   { border-radius: var(--r-md); }

.type-row      { padding: var(--s-5); }
.type-role     { font-family: var(--f-eyebrow); font-weight: 600; font-size: var(--t-meta); letter-spacing: 0.24em; text-transform: uppercase; color: var(--brand-orange); }

.btn, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  font-family: var(--f-eyebrow); font-weight: 600; font-size: var(--t-caption);
  text-transform: uppercase; letter-spacing: 0.18em;
  border: none; border-radius: var(--r-round); cursor: pointer;
  transition: background var(--t-base) var(--easing), transform var(--t-base) var(--easing);
}
.btn          { background: var(--brand-lavender); color: var(--ink); }
.btn:hover    { background: #b9b7c8; transform: translateY(-1px); }
.btn.primary, .btn-primary {
  background: var(--brand-orange); color: #fff; box-shadow: var(--shadow-orange);
}
.btn.primary:hover, .btn-primary:hover { background: #d96538; transform: translateY(-1px); }

/* Voice section "good neighbor" treatment — keeps Tuppence/upright override */
.voice-line .accent { color: inherit; font-family: inherit; font-weight: inherit; font-style: normal; text-transform: none; background: none; }

/* ============================================================
   DASHBOARD aliases — class names rendered by the page JS
   ============================================================ */
/* No horizontal padding here — always nested inside .page, which already
   applies --gutter; adding it again here double-indents content vs. the nav. */
.dashboard, .data-page { max-width: var(--content-max); margin: 0 auto; padding: var(--s-5) 0; }
.dash-header {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s-2); margin-bottom: var(--s-5); padding-bottom: var(--s-2);
}
.dash-title { font-family: var(--f-display); font-weight: 400; font-size: var(--t-hero); line-height: 1.05; letter-spacing: -0.005em; color: var(--ink-pure); }
.dash-sub   { font-family: var(--f-eyebrow); font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-3); }

/* Week badge / period chip */
.week-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-orange); color: #fff;
  font-size: var(--t-caption); font-weight: 500;
  padding: 4px 4px 4px 12px; border-radius: var(--r-pill);
  margin-top: 6px; cursor: pointer;
  transition: filter var(--t-base) var(--easing);
}
.week-badge:hover { filter: brightness(1.06); }

/* Section title */
.section-title {
  font-family: var(--f-eyebrow); font-weight: 600;
  font-size: var(--t-caption); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: var(--s-3);
  display: flex; align-items: center; gap: 8px;
}
.section-title::after { content: ''; flex: 1; height: 0.5px; background: var(--line-strong); }

/* Refresh / icon buttons (page-defined .upload-btn / .icon-btn coerced into np-icon-btn) */
.upload-btn, .icon-btn {
  width: 34px !important; height: 34px !important;
  padding: 0 !important; font-size: 0 !important; gap: 0 !important;
  border-radius: var(--r-md) !important;
}
.upload-btn svg, .icon-btn svg { width: 14px !important; height: 14px !important; }
.daily-last-updated {
  font-family: var(--f-mono); font-size: var(--t-caption-sm);
  color: var(--text-3); white-space: nowrap;
}

/* Metrics table — category bars locked at 11px so iOS can't inflate them */
.metrics-table { width: 100%; border-collapse: collapse; }
.metrics-table th {
  font-size: var(--t-eyebrow); font-weight: 500; color: var(--text-3);
  text-align: left; padding: 6px 12px;
  border-bottom: 0.5px solid var(--line-strong); white-space: nowrap;
}
.metrics-table th:not(:first-child) { text-align: right; }
.metrics-table td { padding: 10px 12px; font-family: var(--f-sans); font-size: var(--t-body-sm); font-weight: 500; color: var(--text); }
.metrics-table td:not(:first-child) { text-align: right; font-family: var(--f-mono); font-weight: 400; }
.metrics-table .cat-row td {
  font-family: var(--f-eyebrow); font-weight: 600;
  font-size: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-2); background: var(--surface-2); padding: 6px 12px;
}
.metrics-table .cat-row { cursor: pointer; }
.metrics-table .cat-row:hover td { background: var(--line); }
.cat-chevron { transition: transform var(--t-base) var(--easing); }
.metrics-table .cat-row.open .cat-chevron { transform: rotate(90deg); }

/* ============================================================
   CALENDAR aliases — the React-rendered calendar lives at #root.
   Plain <nav> selector overrides any inline styling the JSX set
   on the nav element so it picks up our canonical chrome.
   ============================================================ */
/* Calendar nav is full-bleed — the calendar grid below it spans the
   viewport, so the brand mark + page tag stretch to the edges too
   (gutter only, no content-max clamp like the other pages). */
#root nav {
  height: var(--nav-h);
  min-height: var(--nav-h);
  background: rgba(253, 251, 246, 0.78);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* The injected page header above the calendar grid */
#calPageHeader {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-5) var(--gutter) var(--s-3);
}

/* Calendar grid + theme banner — keep page tokens in sync */
.nav-logo-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: var(--r-md); cursor: pointer;
}
.nav-logo-wrap img { height: 31px !important; width: auto !important; }

/* ============================================================
   INDEX (entry hub) — passcode capsule + hub tile aliases
   ============================================================ */
.pw-input { font-size: 16px; }    /* prevent iOS auto-zoom */
.submit, .submit:hover { box-shadow: var(--shadow-orange); }
.tile, .hub-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.tile-label { font-family: var(--f-eyebrow); font-weight: 600; font-size: var(--t-caption); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.tile-sub   { font-family: var(--f-sans); font-size: var(--t-caption); color: var(--text-3); }

/* ============================================================
   MOBILE — PORTAL POLISH
   ------------------------------------------------------------
   Cross-page mobile fixes so every page fits the phone screen,
   the wordmark logo doesn't dominate, and buttons share one shape.
   Applies to all pages that load theme.css.
   ============================================================ */
@media (max-width: 640px) {
  /* Kill horizontal scroll everywhere */
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

  /* --- NAV: single row, banner sized like the index hub --- */
  .np-nav {
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto !important;
    column-gap: 8px !important; row-gap: 0 !important;
    padding: 14px 16px !important;
    min-height: 60px !important;
  }
  /* Brand wrapper: keeps a 44×44 tap target around the small wordmark */
  .np-nav-brand {
    padding: 10px 12px 10px 0 !important;
    margin-left: -4px !important;
    gap: 4px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .np-nav-brand img,
  .np-nav-brand .nav-logo,
  .nav-logo-wrap img,
  #root nav img {
    height: 18px !important; width: auto !important; max-width: 140px !important;
    object-fit: contain !important;
  }
  .np-nav-brand .chev { display: none !important; }

  /* Right cluster: keep on one line, align baseline; tag truncates if narrow */
  .np-nav-right {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: var(--s-2) !important;
    min-width: 0 !important;
  }
  /* Calendar already has heavy nav controls on mobile (Month/Week +
     Edit/Present + Google cal link). Hide its redundant page tag on
     phones to stop "MARKETING CALENDAR" from crashing into the logo. */
  #root nav .np-nav-page-tag { display: none !important; }
  .np-nav .np-nav-page-tag { flex-shrink: 1; min-width: 0; }

  /* Page tag in nav-right: small + tracked but legible, truncates gracefully */
  .np-nav-page-tag {
    font-size: 10px !important; letter-spacing: 0.14em !important;
    padding: 0 !important;
    margin-top: 0 !important;
    color: var(--text-3) !important;
    max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Tabs row drops below the nav as a slim underline strip */
  .np-tabs {
    grid-column: 1 / -1 !important; grid-row: 2 / 3 !important;
    margin: 4px -16px 0 !important;
    padding: 0 12px !important;
    background: transparent !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
  }
  .np-tabs::-webkit-scrollbar { display: none; }
  .np-tab {
    padding: 7px 10px !important;
    font-size: 11.5px !important;
    flex: 0 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .np-tab::after { left: 10px !important; right: 10px !important; bottom: 0 !important; }
  .np-tab.is-active {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text) !important;
  }
  /* Mobile: keep secondary toggles consistent with desktop — orange active */
  .np-toggle button.is-active,
  .np-toggle a.is-active,
  .vt-btn.active,
  .dp-btn.active, .lt-btn.active, .tr-btn.active {
    background: var(--brand-orange) !important; color: #fff !important;
    box-shadow: none !important; border-color: transparent !important;
  }

  /* Right-side cluster — buttons all same size & shape */
  .np-nav-right { gap: 6px !important; }
  .np-icon-btn {
    width: 32px !important; height: 32px !important;
    border-radius: var(--r-md) !important;
  }
  .np-icon-btn svg { width: 14px !important; height: 14px !important; }
  .np-date-chip { padding: 6px 10px !important; font-size: 10.5px !important; gap: 6px !important; }

  /* --- HUB DROPDOWN: centered floating sheet --- */
  .np-hub {
    width: calc(100vw - 24px) !important;
    max-width: 400px !important;
    padding: 14px !important; border-radius: 16px !important;
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .np-hub-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .np-hub-card { padding: 10px !important; gap: 6px !important; border-radius: 10px !important; }
  .np-hub-card-ico { width: 26px !important; height: 26px !important; }
  .np-hub-card-ico svg { width: 13px !important; height: 13px !important; }
  .np-hub-card-title { font-size: 12.5px !important; line-height: 1.2 !important; }
  .np-hub-card-sub { font-size: 11px !important; }

  /* --- MAIN: tighter outer padding so cards fill the screen --- */
  .np-main,
  .page {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 16px !important;
    padding-bottom: 40px !important;
  }
  /* .dashboard/.data-page sit inside .page, which already has the 14px
     side padding above — only tighten vertical here, not horizontal. */
  .dashboard,
  .data-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 40px !important;
  }

  /* Page header text scales down on tiny screens */
  .np-page-title,
  .dash-title,
  .guest-title { font-size: clamp(20px, 6vw, 26px) !important; line-height: 1.1 !important; }
  .np-page-eyebrow { font-size: 10px !important; letter-spacing: 0.22em !important; }

  /* --- BUTTONS / PILLS / TOGGLES: same size + shape on mobile --- */
  .np-btn, .btn, .btn-primary {
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 11px !important;
    border-radius: var(--r-pill) !important;
  }
  .np-pill, .dp-btn, .lt-btn, .tr-btn, .chip {
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    border-radius: var(--r-pill) !important;
    white-space: nowrap;
  }
  .np-toggle, .view-toggle, .date-toggle, .loc-toggle, .menu-filter, .sort-toggle {
    border-radius: var(--r-pill) !important;
    padding: 3px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .np-toggle::-webkit-scrollbar,
  .view-toggle::-webkit-scrollbar,
  .date-toggle::-webkit-scrollbar,
  .loc-toggle::-webkit-scrollbar,
  .menu-filter::-webkit-scrollbar,
  .sort-toggle::-webkit-scrollbar { display: none; }
  .np-toggle button, .np-toggle a,
  .view-toggle .vt-btn,
  .menu-filter button, .sort-toggle button {
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    flex: 0 0 auto !important;
    white-space: nowrap;
    border-radius: var(--r-pill) !important;
  }
  .np-date-pill, .date-pill, .week-badge {
    height: 28px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    border-radius: var(--r-pill) !important;
  }

  /* Header controls row: wrap, never overflow */
  .np-page-controls,
  .np-page-selectors,
  .guest-header-controls,
  .explorer-controls {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .np-page-selectors > *,
  .guest-header-controls > * { flex: 0 1 auto; }

  /* --- CARDS / KPI GRIDS: 2-up always, no overflow --- */
  .np-kpi-grid,
  .kpi-grid,
  .pmix-kpis,
  .soc-kpis,
  .ptd-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .np-kpi, .kpi-card, .ptd-card {
    padding: 12px 14px !important;
    border-radius: var(--r-lg) !important;
    min-width: 0;
  }
  .np-kpi-value, .kpi-value {
    font-size: 18px !important; line-height: 1.15 !important;
    word-break: break-word; overflow-wrap: anywhere;
  }
  .np-kpi-label, .kpi-label { font-size: 9.5px !important; letter-spacing: 0.14em !important; }
  .np-kpi-sub, .kpi-sub, .kpi-change-label { font-size: 10.5px !important; }

  /* Cards: consistent padding + radius */
  .np-card, .full-card, .source-card, .chart-card {
    padding: 14px !important;
    border-radius: var(--r-lg) !important;
  }
  .np-card-title, .chart-card-title, .card-title { font-size: 13.5px !important; }
  .np-card-sub,  .chart-card-sub,  .card-sub  { font-size: 11.5px !important; }

  /* Chart wrappers shrink so they fit the screen */
  .trend-canvas { height: 260px !important; }

  /* Tables scroll horizontally instead of overflowing the page */
  .table-wrap, .table-scroll { margin-left: -14px; margin-right: -14px; padding: 0 14px; }

  /* --- FOOTER: smaller, less letter-spacing crush --- */
  .np-foot {
    padding: 24px 16px 32px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.26em !important;
  }
}

/* Tighter still on very small phones (<= 380px) so nothing wraps awkwardly */
@media (max-width: 380px) {
  .np-nav-brand img,
  .np-nav-brand .nav-logo,
  .nav-logo-wrap img,
  #root nav img { height: 14px !important; max-width: 108px !important; }
  .np-nav-page-tag { font-size: 9px !important; max-width: 110px; }
  .np-kpi-value, .kpi-value { font-size: 16px !important; }
}


/* ============================================================
   Site footer — Neighborly mark + "Neighbors Only Hub" wordmark
   Appears at the bottom of every page.
============================================================ */
.np-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px 28px;
  margin-top: auto;
  opacity: 0.78;
}
.np-footer img {
  width: 96px;
  height: auto;
  display: block;
  filter: brightness(0);
}
.np-footer .np-footer-text {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text2, #6b6960);
}
@media (max-width: 520px) {
  .np-footer { padding: 28px 12px 20px; }
  .np-footer img { width: 80px; }
  .np-footer .np-footer-text { font-size: 9.5px; letter-spacing: 0.18em; }
}