/* ==========================================================================
   PAMOJA DESIGN SYSTEM
   Brand Kit v2 · Forest Green / Warm Ivory / Gold + Sand
   Together we hold.
   ==========================================================================
   Drop-in CSS file. Import once at the top of every page:
       <link rel="stylesheet" href="/pamoja-design-system.css">
   Then use the CSS custom properties and utility classes throughout.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FONTS — served from this site (/fonts/), linked from each page's <head>
   --------------------------------------------------------------------------
   Never an @import here: an @import inside a stylesheet is only discovered
   after this file arrives and blocks rendering until it is answered. Each page
   carries, just above the link to this file:

     <link rel="stylesheet" href="/fonts/pamoja-fonts.css">

   Until 3 Oct 2026 that line pointed at fonts.googleapis.com, which told
   Google the address of every page a family opened (compliance fix F13).
   A new page that links this file needs that line too. */


/* --------------------------------------------------------------------------
   2. BRAND TOKENS — Use these everywhere. Never hardcode hex.
   -------------------------------------------------------------------------- */

:root {
  /* ---- Color · Forest family ---- */
  --pamoja-forest-deep:    #2C4A3E;  /* Primary background — sidebar · headers */
  --pamoja-forest-mid:     #3D6B5C;  /* Modal headers · active states */
  --pamoja-forest-sheen-soft: #284439;  /* Header sheen far-stop — depth on Deep Forest (S36) */
  --pamoja-forest-sheen-deep: #21382F;  /* Card/surface sheen far-stop — depth on Deep Forest (S36) */
  --pamoja-forest-soft:    #4A7F6E;  /* Hover state on forest surfaces */

  /* ---- Color · Ivory family ---- */
  --pamoja-ivory:          #F7F2E8;  /* Primary light background */
  --pamoja-ivory-dark:     #EDE7D8;  /* Cards · form fields · surfaces */
  --pamoja-ivory-soft:     #FBF8F1;  /* Subtle highlight surface */

  /* ---- Color · Theme accent (swappable — Rose default) ---- */
  /* Fixed palette — no per-user theme preference                          */
  /* ACCENT — Bright Gold. The pointing color: active nav · stat numbers · CTA · tagline */
  --pamoja-accent:         #C49A3A;  /* Bright Gold */
  --pamoja-accent-soft:    #D4AE54;  /* Gold hover */
  --pamoja-accent-deep:    #9E7A26;  /* Gold pressed */
  --pamoja-accent-text:    #2C2410;  /* Dark text on gold-filled surfaces */

  /* SAND — the holding color: dividers · card edges · hover bg · selected states */
  --pamoja-sand:           #C2A878;  /* Sand */
  --pamoja-sand-soft:      #D6C29B;  /* Sand light — subtle fills */
  --pamoja-sand-wash:      rgba(194, 168, 120, 0.14);  /* Sand hover background */
  --pamoja-sand-text:      #3A2F18;  /* Dark text on sand-filled surfaces */

  /* ---- Color · Emergency (scoped — Emergency Alert + urgent states ONLY) ---- */
  --pamoja-emergency:      #A82F28;  /* Brick red — owner-approved, emergency/urgent only */
  --pamoja-emergency-deep: #8E2722;  /* Emergency pressed / hover */

  /* ---- Color · Text ---- */
  --pamoja-text:           #2C4A3E;  /* Body text on ivory — Deep Forest (v4) */
  --pamoja-text-soft:      #4A3F35;  /* Secondary text · captions (warm brown — flagged with text review) */
  --pamoja-text-muted:     #6B5E52;  /* Tertiary text · timestamps · meta — darkened to clear WCAG AA on cards (mobile contrast pass) */
  --pamoja-text-inverse:   #F7F2E8;  /* Text on forest surfaces */

  /* ---- Color · Status ---- */
  --pamoja-status-good:    var(--pamoja-forest-mid);  /* Confirmed · resolved · current — forest family (no mint) */
  --pamoja-status-warn:    var(--pamoja-accent);     /* Attention · refill due — Gold #C49A3A */
  --pamoja-status-urgent:  var(--pamoja-emergency);  /* Urgent · emergency — Brick red #A82F28 */
  --pamoja-status-info:    var(--pamoja-forest-mid);  /* Informational — muted forest (no blue) */

  /* ---- Color · Lines and borders ---- */
  --pamoja-line:           rgba(26, 22, 18, 0.08);
  --pamoja-line-strong:    rgba(26, 22, 18, 0.16);
  --pamoja-line-forest:    rgba(247, 242, 232, 0.16);

  /* ---- Typography · Families ---- */
  --pamoja-font-display:   'Cormorant Garamond', 'Garamond', Georgia, serif;
  --pamoja-font-heading:   'Playfair Display', 'Garamond', Georgia, serif;
  --pamoja-font-body:      'Cormorant Garamond', 'Garamond', Georgia, serif;
  --pamoja-font-mono:      'SF Mono', 'Menlo', 'Consolas', monospace;

  /* ---- Typography · Scale (mobile-first, accessible — raised S48 for elderly readability) ---- */
  /* Base html font-size is set to 112.5% (18px) in the html rule below.      */
  /* All rem values scale from that base automatically.                         */
  --pamoja-size-display:   2.5rem;
  --pamoja-size-h1:        2rem;
  --pamoja-size-h2:        1.5rem;
  --pamoja-size-h3:        1.25rem;
  --pamoja-size-h4:        1.125rem;
  --pamoja-size-body:      1rem;        /* 18px at new base */
  --pamoja-size-body-lg:   1.0625rem;   /* 19px */
  --pamoja-size-small:     0.9375rem;   /* 17px */
  --pamoja-size-caption:   0.875rem;    /* 15.75px — was 13px */
  --pamoja-size-tiny:      0.8125rem;   /* 14.6px  — was 12px */
  --pamoja-size-footer-content: 0.75rem; /* 13.5px — was 11px */

  /* ---- Typography · Weights ---- */
  --pamoja-weight-light:   300;
  --pamoja-weight-regular: 400;
  --pamoja-weight-medium:  500;
  --pamoja-weight-semi:    600;

  /* ---- Typography · Line height ---- */
  --pamoja-leading-tight:  1.2;
  --pamoja-leading-snug:   1.4;
  --pamoja-leading-normal: 1.6;
  --pamoja-leading-relaxed:1.8;

  /* ---- Typography · Letter spacing ---- */
  --pamoja-tracking-tight:    -0.01em;
  --pamoja-tracking-normal:    0;
  --pamoja-tracking-wide:      0.04em;
  --pamoja-tracking-wider:     0.08em;
  --pamoja-tracking-wordmark:  0.2em;

  /* ---- Spacing (8px base) ---- */
  --pamoja-space-1:        0.25rem;
  --pamoja-space-2:        0.5rem;
  --pamoja-space-3:        0.75rem;
  --pamoja-space-4:        1rem;
  --pamoja-space-5:        1.5rem;
  --pamoja-space-6:        2rem;
  --pamoja-space-7:        3rem;
  --pamoja-space-8:        4rem;
  --pamoja-space-9:        6rem;

  /* ---- Radius ---- */
  --pamoja-radius-sm:      4px;
  --pamoja-radius-md:      8px;
  --pamoja-radius-lg:      12px;
  --pamoja-radius-xl:      20px;
  --pamoja-radius-pill:    9999px;

  /* ---- Shadow ---- */
  --pamoja-shadow-sm:      0 1px 2px rgba(26, 22, 18, 0.04), 0 1px 3px rgba(26, 22, 18, 0.06);
  --pamoja-shadow-md:      0 2px 6px rgba(26, 22, 18, 0.06), 0 4px 12px rgba(26, 22, 18, 0.08);
  --pamoja-shadow-lg:      0 4px 16px rgba(26, 22, 18, 0.08), 0 8px 24px rgba(26, 22, 18, 0.10);
  --pamoja-shadow-card:    0 1px 3px rgba(26, 22, 18, 0.05), 0 4px 16px rgba(26, 22, 18, 0.04);
  --pamoja-shadow-forest:  0 4px 16px rgba(26, 60, 50, 0.20), 0 2px 6px rgba(26, 60, 50, 0.16);

  /* ---- Motion ---- */
  --pamoja-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --pamoja-ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --pamoja-duration-fast:  150ms;
  --pamoja-duration-base:  250ms;
  --pamoja-duration-slow:  400ms;

  /* ---- Layout ---- */
  --pamoja-max-width:      720px;
  --pamoja-max-width-wide: 1080px;
  --pamoja-content-padding:1.25rem;
}

/* Fixed warm palette — Gold accent + Sand structural warmth. No theme toggle. */


/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 112.5%;  /* 18px base — raised S48 for elderly readability */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--pamoja-font-body);
  font-size: var(--pamoja-size-body);
  font-weight: var(--pamoja-weight-regular);
  line-height: var(--pamoja-leading-relaxed);
  color: var(--pamoja-text);
  background: var(--pamoja-ivory) url('images/dash-bg.png') center top / cover fixed;background-image:image-set(url('images/dash-bg.webp') type('image/webp'),url('dash-bg.png') type('image/png'));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

button {
  font: inherit; color: inherit; background: none;
  border: none; cursor: pointer; padding: 0;
}

input, textarea, select { font: inherit; color: inherit; }


/* --------------------------------------------------------------------------
   4. SURFACE CLASSES
   -------------------------------------------------------------------------- */

.pamoja-surface-ivory { background: var(--pamoja-ivory); color: var(--pamoja-text); }
.pamoja-surface-forest { background: var(--pamoja-forest-deep); color: var(--pamoja-text-inverse); }
.pamoja-surface-forest .pamoja-line { color: var(--pamoja-line-forest); }


/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */

.pamoja-wordmark {
  font-family: var(--pamoja-font-display);
  font-weight: var(--pamoja-weight-light);
  font-size: var(--pamoja-size-display);
  letter-spacing: var(--pamoja-tracking-wordmark);
  line-height: var(--pamoja-leading-tight);
  text-transform: uppercase;
}

.pamoja-display {
  font-family: var(--pamoja-font-display);
  font-weight: var(--pamoja-weight-light);
  font-size: var(--pamoja-size-display);
  letter-spacing: var(--pamoja-tracking-tight);
  line-height: var(--pamoja-leading-tight);
}

/* Tagline — uses theme accent */
.pamoja-tagline {
  font-family: var(--pamoja-font-display);
  font-weight: var(--pamoja-weight-light);
  font-style: italic;
  font-size: var(--pamoja-size-body-lg);
  color: var(--pamoja-accent);
  letter-spacing: var(--pamoja-tracking-wide);
}

.pamoja-h1, h1 {
  font-family: var(--pamoja-font-heading);
  font-weight: var(--pamoja-weight-regular);
  font-size: var(--pamoja-size-h1);
  line-height: var(--pamoja-leading-snug);
  letter-spacing: var(--pamoja-tracking-tight);
  margin: 0 0 var(--pamoja-space-4);
}

.pamoja-h2, h2 {
  font-family: var(--pamoja-font-heading);
  font-weight: var(--pamoja-weight-regular);
  font-size: var(--pamoja-size-h2);
  line-height: var(--pamoja-leading-snug);
  margin: 0 0 var(--pamoja-space-3);
}

.pamoja-h3, h3 {
  font-family: var(--pamoja-font-body);
  font-weight: var(--pamoja-weight-medium);
  font-size: var(--pamoja-size-h3);
  line-height: var(--pamoja-leading-snug);
  margin: 0 0 var(--pamoja-space-3);
}

.pamoja-h4, h4 {
  font-family: var(--pamoja-font-body);
  font-weight: var(--pamoja-weight-medium);
  font-size: var(--pamoja-size-h4);
  line-height: var(--pamoja-leading-snug);
  margin: 0 0 var(--pamoja-space-2);
}

.pamoja-subheading {
  font-family: var(--pamoja-font-body);
  font-weight: var(--pamoja-weight-light);
  font-style: italic;
  font-size: var(--pamoja-size-body-lg);
  color: var(--pamoja-accent);
  line-height: var(--pamoja-leading-normal);
}

.pamoja-body, p {
  font-family: var(--pamoja-font-body);
  font-weight: var(--pamoja-weight-regular);
  font-size: var(--pamoja-size-body);
  line-height: var(--pamoja-leading-relaxed);
  margin: 0 0 var(--pamoja-space-4);
}

@media (min-width: 640px) {
  .pamoja-body, p { font-size: var(--pamoja-size-body-lg); }
}

.pamoja-caption {
  font-family: var(--pamoja-font-body);
  font-weight: var(--pamoja-weight-regular);
  font-size: var(--pamoja-size-caption);
  letter-spacing: var(--pamoja-tracking-wider);
  text-transform: uppercase;
  color: var(--pamoja-text-muted);
}

.pamoja-meta {
  font-family: var(--pamoja-font-body);
  font-size: var(--pamoja-size-small);
  color: var(--pamoja-text-muted);
}

/* Footer minimums — audit enforced */
.pamoja-footer-content { font-size: var(--pamoja-size-footer-content); }
.pamoja-footer-header  { font-size: var(--pamoja-size-tiny); font-weight: var(--pamoja-weight-medium); }


/* --------------------------------------------------------------------------
   6. HEART LINE DIVIDER (replaces amber vine under wordmark)
   -------------------------------------------------------------------------- */

/* On ivory backgrounds — Gold #C49A3A (v4 target: Sand #C2A878 — pending) */
.pamoja-heartline {
  display: block;
  width: 160px;
  height: 14px;
  margin: var(--pamoja-space-3) auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14' fill='none'><line x1='0' y1='7' x2='62' y2='7' stroke='%23C49A3A' stroke-width='1'/><path d='M80 4 C80 4,77 1,74 3 C71 5,74 9,80 12 C86 9,89 5,86 3 C83 1,80 4,80 4Z' fill='%23C49A3A'/><line x1='98' y1='7' x2='160' y2='7' stroke='%23C49A3A' stroke-width='1'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* On forest green backgrounds — Warm Ivory #F7F2E8 */
.pamoja-surface-forest .pamoja-heartline {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14' fill='none'><line x1='0' y1='7' x2='62' y2='7' stroke='%23F7F2E8' stroke-width='1'/><path d='M80 4 C80 4,77 1,74 3 C71 5,74 9,80 12 C86 9,89 5,86 3 C83 1,80 4,80 4Z' fill='%23F7F2E8'/><line x1='98' y1='7' x2='160' y2='7' stroke='%23F7F2E8' stroke-width='1'/></svg>");
}

/* Legacy vine — retained for non-wordmark use */
.pamoja-vine {
  display: block;
  width: 200px;
  height: 12px;
  margin: var(--pamoja-space-4) auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' fill='none'><path d='M2 6 Q 30 0, 60 6 T 120 6 T 180 6 L 198 6' stroke='%23C2A878' stroke-width='1.2' fill='none' stroke-linecap='round'/><circle cx='40' cy='6' r='1.8' fill='%23C2A878'/><circle cx='100' cy='6' r='1.8' fill='%23C2A878'/><circle cx='160' cy='6' r='1.8' fill='%23C2A878'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

.pamoja-vine-small { width: 120px; margin: var(--pamoja-space-3) auto; }
.pamoja-vine-wide  { width: 280px; margin: var(--pamoja-space-5) auto; }
.pamoja-vine-left  { margin-left: 0; margin-right: auto; }


/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */

.pamoja-card {
  background: var(--pamoja-ivory-soft);
  border: 1px solid var(--pamoja-line);
  border-radius: var(--pamoja-radius-lg);
  padding: var(--pamoja-space-5);
  box-shadow: var(--pamoja-shadow-card);
  transition: box-shadow var(--pamoja-duration-base) var(--pamoja-ease),
              transform var(--pamoja-duration-base) var(--pamoja-ease);
}

.pamoja-card-raised {
  background: #FFFFFF;
  border: 1px solid var(--pamoja-line);
  border-radius: var(--pamoja-radius-lg);
  padding: var(--pamoja-space-5);
  box-shadow: var(--pamoja-shadow-md);
}

.pamoja-card-quiet {
  background: var(--pamoja-ivory-dark);
  border: none;
  border-radius: var(--pamoja-radius-md);
  padding: var(--pamoja-space-4);
}

.pamoja-card-forest {
  background: var(--pamoja-forest-mid);
  border: 1px solid var(--pamoja-line-forest);
  border-radius: var(--pamoja-radius-lg);
  padding: var(--pamoja-space-5);
  color: var(--pamoja-text-inverse);
  box-shadow: var(--pamoja-shadow-forest);
}


/* --------------------------------------------------------------------------
   8. BUTTONS
   -------------------------------------------------------------------------- */

.pamoja-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pamoja-space-2);
  min-height: 48px;
  padding: 0 var(--pamoja-space-5);
  font-family: var(--pamoja-font-body);
  font-size: var(--pamoja-size-body);
  font-weight: var(--pamoja-weight-medium);
  letter-spacing: var(--pamoja-tracking-wide);
  border-radius: var(--pamoja-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--pamoja-duration-fast) var(--pamoja-ease),
              border-color var(--pamoja-duration-fast) var(--pamoja-ease),
              color var(--pamoja-duration-fast) var(--pamoja-ease),
              transform var(--pamoja-duration-fast) var(--pamoja-ease);
  text-decoration: none;
  white-space: nowrap;
}

.pamoja-btn:active { transform: translateY(1px); }
.pamoja-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* PRIMARY — Forest Green (confirm actions, continue, save) */
.pamoja-btn-primary {
  background: var(--pamoja-forest-deep);
  color: var(--pamoja-ivory);
  border-color: var(--pamoja-forest-deep);
}
.pamoja-btn-primary:hover  { background: var(--pamoja-forest-mid); border-color: var(--pamoja-forest-mid); }
.pamoja-btn-primary:active { background: var(--pamoja-forest-soft); }

/* ACCENT — theme accent color (Sign In, CTAs) */
.pamoja-btn-accent {
  background: var(--pamoja-accent);
  color: var(--pamoja-accent-text);
  border-color: var(--pamoja-accent);
}
.pamoja-btn-accent:hover  { background: var(--pamoja-accent-soft); border-color: var(--pamoja-accent-soft); }
.pamoja-btn-accent:active { background: var(--pamoja-accent-deep); border-color: var(--pamoja-accent-deep); }

/* SECONDARY — forest outline */
.pamoja-btn-secondary {
  background: transparent;
  color: var(--pamoja-forest-deep);
  border-color: var(--pamoja-forest-deep);
}
.pamoja-btn-secondary:hover  { background: var(--pamoja-ivory-dark); }
.pamoja-btn-secondary:active { background: var(--pamoja-forest-deep); color: var(--pamoja-ivory); }

/* TERTIARY — outline */
.pamoja-btn-tertiary {
  background: transparent;
  color: var(--pamoja-text);
  border-color: var(--pamoja-line-strong);
}
.pamoja-btn-tertiary:hover { background: var(--pamoja-ivory-dark); border-color: var(--pamoja-text-soft); }

/* GHOST */
.pamoja-btn-ghost {
  background: transparent;
  color: var(--pamoja-text-soft);
  border-color: transparent;
  padding: 0 var(--pamoja-space-3);
  min-height: 40px;
}
.pamoja-btn-ghost:hover { color: var(--pamoja-text); background: var(--pamoja-ivory-dark); }

/* URGENT — Emergency only */
.pamoja-btn-urgent {
  background: var(--pamoja-emergency);
  color: var(--pamoja-ivory);
  border-color: var(--pamoja-emergency);
}
.pamoja-btn-urgent:hover  { background: var(--pamoja-emergency-deep); }
.pamoja-btn-urgent:active { background: var(--pamoja-emergency-deep); }

.pamoja-surface-forest .pamoja-btn-tertiary {
  color: var(--pamoja-text-inverse);
  border-color: var(--pamoja-line-forest);
}
.pamoja-surface-forest .pamoja-btn-tertiary:hover {
  background: var(--pamoja-forest-mid);
  border-color: var(--pamoja-accent);
}

.pamoja-btn-lg { min-height: 56px; font-size: var(--pamoja-size-body-lg); padding: 0 var(--pamoja-space-6); }
.pamoja-btn-sm { min-height: 40px; font-size: var(--pamoja-size-small); padding: 0 var(--pamoja-space-4); }
.pamoja-btn-block { display: flex; width: 100%; }


/* --------------------------------------------------------------------------
   9. FORM INPUTS
   -------------------------------------------------------------------------- */

.pamoja-input,
.pamoja-textarea,
.pamoja-select {
  width: 100%;
  min-height: 48px;
  padding: var(--pamoja-space-3) var(--pamoja-space-4);
  font-family: var(--pamoja-font-body);
  font-size: var(--pamoja-size-body);
  line-height: var(--pamoja-leading-normal);
  color: var(--pamoja-text);
  background: var(--pamoja-ivory-soft);
  border: 1px solid var(--pamoja-line-strong);
  border-radius: var(--pamoja-radius-md);
  transition: border-color var(--pamoja-duration-fast) var(--pamoja-ease),
              background var(--pamoja-duration-fast) var(--pamoja-ease);
}

.pamoja-input:focus,
.pamoja-textarea:focus,
.pamoja-select:focus {
  outline: none;
  border-color: var(--pamoja-accent);
  background: #FFFFFF;
}

.pamoja-textarea { min-height: 96px; padding-top: var(--pamoja-space-3); resize: vertical; }

.pamoja-label {
  display: block;
  font-family: var(--pamoja-font-body);
  font-size: var(--pamoja-size-caption);
  font-weight: var(--pamoja-weight-medium);
  letter-spacing: var(--pamoja-tracking-wider);
  text-transform: uppercase;
  color: var(--pamoja-accent);
  margin-bottom: var(--pamoja-space-2);
}

.pamoja-help {
  display: block;
  font-size: var(--pamoja-size-caption);
  color: var(--pamoja-text-muted);
  margin-top: var(--pamoja-space-2);
  font-style: italic;
}


/* --------------------------------------------------------------------------
   10. NAVIGATION — sidebar desktop + persistent mobile bottom nav
   -------------------------------------------------------------------------- */

/* Bottom nav — mobile */
.pamoja-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--pamoja-ivory-soft);
  border-top: 1px solid var(--pamoja-line);
  padding: var(--pamoja-space-2) var(--pamoja-space-3);
  padding-bottom: calc(var(--pamoja-space-2) + env(safe-area-inset-bottom, 0));
  z-index: 60;
  box-shadow: 0 -2px 12px rgba(26, 22, 18, 0.04);
}

.pamoja-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  padding: var(--pamoja-space-2);
  font-family: var(--pamoja-font-body);
  font-size: var(--pamoja-size-tiny);
  letter-spacing: var(--pamoja-tracking-wide);
  color: var(--pamoja-text-muted);
  text-decoration: none;
  transition: color var(--pamoja-duration-fast) var(--pamoja-ease);
}

.pamoja-nav-item:hover { color: var(--pamoja-text-soft); }
.pamoja-nav-item.is-active { color: var(--pamoja-accent); }
.pamoja-nav-item .pamoja-nav-icon { font-size: 22px; line-height: 1; }

.pamoja-has-bottom-nav { padding-bottom: 80px; }

/* Theme toggle removed — fixed Gold + Sand palette. */


/* --------------------------------------------------------------------------
   11. STATUS PILLS
   -------------------------------------------------------------------------- */

.pamoja-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pamoja-space-2);
  padding: 4px var(--pamoja-space-3);
  font-family: var(--pamoja-font-body);
  font-size: var(--pamoja-size-caption);
  font-weight: var(--pamoja-weight-medium);
  letter-spacing: var(--pamoja-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--pamoja-radius-pill);
  background: var(--pamoja-ivory-dark);
  color: var(--pamoja-text-soft);
}

.pamoja-pill-good     { background: rgba(61, 107, 92, 0.14);  color: var(--pamoja-status-good); }
.pamoja-pill-warn     { background: rgba(196, 154, 58, 0.14); color: var(--pamoja-status-warn); }
.pamoja-pill-urgent   { background: rgba(168, 47, 40, 0.14);  color: var(--pamoja-status-urgent); }
.pamoja-pill-overdue  { background: rgba(168, 47, 40, 0.14);  color: var(--pamoja-status-urgent); }
.pamoja-pill-complete { background: rgba(61, 107, 92, 0.14);  color: var(--pamoja-status-good); }
.pamoja-pill-info     { background: rgba(61, 107, 92, 0.14); color: var(--pamoja-status-info); }
.pamoja-pill-accent   { background: rgba(196, 154, 58, 0.12); color: var(--pamoja-accent); }


/* --------------------------------------------------------------------------
   12. PRIORITY TABS — Add Task modal
   -------------------------------------------------------------------------- */

.pamoja-priority-tab {
  flex: 1;
  min-height: 40px;
  padding: var(--pamoja-space-2) var(--pamoja-space-3);
  font-family: var(--pamoja-font-body);
  font-size: var(--pamoja-size-caption);
  font-weight: var(--pamoja-weight-medium);
  letter-spacing: var(--pamoja-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--pamoja-radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: all var(--pamoja-duration-fast) var(--pamoja-ease);
}

/* High — Gold (v4) */
.pamoja-priority-high {
  border-color: var(--pamoja-accent);
  color: var(--pamoja-accent);
  background: transparent;
}
.pamoja-priority-high.is-selected {
  background: var(--pamoja-accent);
  color: var(--pamoja-ivory);
}

/* Medium — Theme accent */
.pamoja-priority-medium {
  border-color: var(--pamoja-accent);
  color: var(--pamoja-accent);
  background: transparent;
}
.pamoja-priority-medium.is-selected {
  background: var(--pamoja-accent);
  color: var(--pamoja-accent-text);
}

/* Low — Forest green */
.pamoja-priority-low {
  border-color: var(--pamoja-forest-deep);
  color: var(--pamoja-forest-deep);
  background: transparent;
}
.pamoja-priority-low.is-selected {
  background: var(--pamoja-forest-deep);
  color: var(--pamoja-ivory);
}


/* --------------------------------------------------------------------------
   13. MODAL — forest green header standard
   -------------------------------------------------------------------------- */

.pamoja-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 18, 0.5);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 640px) {
  .pamoja-modal-overlay { align-items: center; }
}

.pamoja-modal {
  background: var(--pamoja-ivory);
  border-radius: var(--pamoja-radius-xl) var(--pamoja-radius-xl) 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--pamoja-shadow-lg);
}

@media (min-width: 640px) {
  .pamoja-modal { border-radius: var(--pamoja-radius-xl); }
}

.pamoja-modal-header {
  background: linear-gradient(135deg, var(--pamoja-forest-deep), var(--pamoja-forest-sheen-soft));
  color: var(--pamoja-ivory);
  padding: var(--pamoja-space-5) var(--pamoja-space-5) var(--pamoja-space-4);
  border-radius: var(--pamoja-radius-xl) var(--pamoja-radius-xl) 0 0;
}

.pamoja-modal-title {
  font-family: var(--pamoja-font-display);
  font-weight: var(--pamoja-weight-light);
  font-size: var(--pamoja-size-h3);
  letter-spacing: var(--pamoja-tracking-wide);
  margin: 0;
  color: var(--pamoja-ivory);
}

.pamoja-modal-body {
  padding: var(--pamoja-space-5);
}

/* Confirm modal label */
.pamoja-confirm-label {
  font-size: var(--pamoja-size-caption);
  font-weight: var(--pamoja-weight-medium);
  letter-spacing: var(--pamoja-tracking-wider);
  text-transform: uppercase;
  color: var(--pamoja-accent);
  margin-bottom: var(--pamoja-space-3);
  display: block;
}


/* --------------------------------------------------------------------------
   14. CONTRIBUTE ROWS
   -------------------------------------------------------------------------- */

.pamoja-contribute-list {
  display: flex;
  flex-direction: column;
  gap: var(--pamoja-space-3);
  margin: var(--pamoja-space-4) 0;
}

.pamoja-contribute-row {
  display: flex;
  align-items: center;
  gap: var(--pamoja-space-4);
  padding: var(--pamoja-space-4);
  background: var(--pamoja-ivory-soft);
  border: 1px solid var(--pamoja-line);
  border-radius: var(--pamoja-radius-md);
  text-decoration: none;
  color: var(--pamoja-text);
  transition: background var(--pamoja-duration-fast) var(--pamoja-ease),
              border-color var(--pamoja-duration-fast) var(--pamoja-ease),
              transform var(--pamoja-duration-fast) var(--pamoja-ease);
  min-height: 64px;
}

.pamoja-contribute-row:hover {
  background: #FFFFFF;
  border-color: var(--pamoja-accent);
  transform: translateY(-1px);
}

.pamoja-contribute-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pamoja-ivory-dark);
  border-radius: var(--pamoja-radius-md);
  font-size: 20px;
  flex-shrink: 0;
}

.pamoja-contribute-label { font-size: var(--pamoja-size-body); font-weight: var(--pamoja-weight-medium); }
.pamoja-contribute-hint  { font-size: var(--pamoja-size-caption); color: var(--pamoja-text-muted); margin-top: 2px; }


/* --------------------------------------------------------------------------
   15. LAYOUT HELPERS
   -------------------------------------------------------------------------- */

.pamoja-container      { max-width: var(--pamoja-max-width); margin: 0 auto; padding: var(--pamoja-space-5) var(--pamoja-content-padding); }
.pamoja-container-wide { max-width: var(--pamoja-max-width-wide); margin: 0 auto; padding: var(--pamoja-space-5) var(--pamoja-content-padding); }

.pamoja-stack   { display: flex; flex-direction: column; }
.pamoja-stack-1 { gap: var(--pamoja-space-2); }
.pamoja-stack-2 { gap: var(--pamoja-space-3); }
.pamoja-stack-3 { gap: var(--pamoja-space-4); }
.pamoja-stack-4 { gap: var(--pamoja-space-5); }
.pamoja-stack-5 { gap: var(--pamoja-space-6); }
.pamoja-stack-6 { gap: var(--pamoja-space-7); }

.pamoja-row         { display: flex; align-items: center; gap: var(--pamoja-space-3); }
.pamoja-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--pamoja-space-3); }
.pamoja-row-end     { display: flex; align-items: center; justify-content: flex-end; gap: var(--pamoja-space-3); }

.pamoja-divider { height: 1px; background: var(--pamoja-line); border: none; margin: var(--pamoja-space-5) 0; }
.pamoja-divider-sand { height: 2px; background: var(--pamoja-sand); opacity: 0.5; border: none; margin: var(--pamoja-space-4) 0; border-radius: 0; }
.pamoja-surface-forest .pamoja-divider { background: var(--pamoja-line-forest); }


/* --------------------------------------------------------------------------
   16. SKELETON — loading state (replaces "Loading..." text)
   -------------------------------------------------------------------------- */

.pamoja-skeleton {
  background: linear-gradient(90deg, var(--pamoja-ivory-dark) 25%, var(--pamoja-ivory-soft) 50%, var(--pamoja-ivory-dark) 75%);
  background-size: 200% 100%;
  animation: pamoja-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--pamoja-radius-sm);
  display: inline-block;
}

@keyframes pamoja-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pamoja-skeleton { animation: none; background: var(--pamoja-ivory-dark); }
}

.pamoja-skeleton-text  { height: 1em; width: 60%; }
.pamoja-skeleton-label { height: 0.75em; width: 40%; }
.pamoja-skeleton-block { height: 80px; width: 100%; border-radius: var(--pamoja-radius-md); }


/* --------------------------------------------------------------------------
   17. EMOTIONAL MOMENTS
   -------------------------------------------------------------------------- */

.pamoja-quote {
  font-family: var(--pamoja-font-display);
  font-weight: var(--pamoja-weight-light);
  font-style: italic;
  font-size: var(--pamoja-size-h2);
  line-height: var(--pamoja-leading-normal);
  color: var(--pamoja-text-soft);
  text-align: center;
  padding: var(--pamoja-space-6) var(--pamoja-space-4);
}

.pamoja-attribution {
  display: block;
  font-style: normal;
  font-size: var(--pamoja-size-caption);
  letter-spacing: var(--pamoja-tracking-wider);
  text-transform: uppercase;
  color: var(--pamoja-text-muted);
  margin-top: var(--pamoja-space-3);
}


/* --------------------------------------------------------------------------
   18. ACCESSIBILITY
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--pamoja-accent);
  outline-offset: 2px;
  border-radius: var(--pamoja-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.pamoja-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   19. MOBILE ACCESSIBILITY — larger tap targets + text on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  html { font-size: 118.75%; } /* ~19px on mobile — extra bump for small screens */

  /* Minimum tap target 48px on all interactive elements */
  button, a, input, select, textarea, [role="button"] {
    min-height: 44px;
  }

  /* Nav labels and meta text — never below 14px on mobile */
  .pamoja-nav-item { font-size: 0.8125rem; }

  /* Form inputs — full size, easy to read and tap */
  .pamoja-input,
  .pamoja-textarea,
  .pamoja-select { font-size: 1rem; min-height: 52px; }

  /* Buttons — larger on mobile */
  .pamoja-btn { min-height: 52px; font-size: 1rem; }
  .pamoja-btn-sm { min-height: 44px; font-size: 0.9375rem; }
}

/* --------------------------------------------------------------------------
   END OF PAMOJA DESIGN SYSTEM v2
   "Together we hold."
   -------------------------------------------------------------------------- */




/* Brand logo badge — green-bird logo on a cream chip for forest/green surfaces (S52) */
.pamoja-logo-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--pamoja-ivory);border-radius:16px;padding:10px 14px;box-shadow:0 2px 8px rgba(0,0,0,0.12);}
.pamoja-logo-badge img{display:block;height:46px;width:auto;}


/* ---- Shared page atmosphere — warm botanical (body bg) + clasped-hands footer (S52) ---- */

/* The z-index here is load-bearing, not decoration. The hands are a z-index:-1
   pseudo-element, and a negative-z child paints below the background of its
   nearest STACKING CONTEXT, not of its parent. While body was not one, the
   hands were painted below the canvas and every page's own opaque
   `body{background:var(--pamoja-ivory)}` covered them completely. That is why
   they vanished when the canvas background was added to html.
   Making body a stacking context puts the order back: body's background, then
   the hands, then everything on the page. */
body{ position: relative; z-index: 0; }
body::after{
  content:''; position:fixed; right:0; bottom:0;
  width:min(42vw,520px); height:min(42vh,430px);
  background:url('images/pamoja-footer-hands.png') right bottom / contain no-repeat;background-image:image-set(url('images/pamoja-footer-hands.webp') type('image/webp'),url('images/pamoja-footer-hands.png') type('image/png'));
  opacity:.5; pointer-events:none; z-index:-1;
}
@media (max-width:760px){
  body::after{ width:72vw; height:30vh; opacity:.30; }
}


/* Corner brand mark — green-bird logo on a cream chip, top-right (S52) */
.pamoja-corner-logo{position:fixed;top:14px;right:16px;z-index:60;background:transparent;padding:0;box-shadow:none;pointer-events:none;}
.pamoja-corner-logo img{display:block;height:38px;width:auto;}
@media(max-width:760px){.pamoja-corner-logo{top:10px;right:10px;}.pamoja-corner-logo img{height:30px;}}
/* Gold foliage accent for green banners (matches dashboard patient banner) — S52 */
.pamoja-leaf{position:relative;overflow:hidden;}
.pamoja-leaf::after{content:'';position:absolute;top:-10px;right:-10px;width:150px;height:120px;background:url('images/dash-leaf.png') right top / contain no-repeat;opacity:.45;pointer-events:none;}

/* ── S53 unified page header: centered logo above a full-bleed green banner (matches Account) ── */
body{overflow-x:hidden;}
.pmj-bh{position:relative;text-align:center;margin:2px 0 12px;}
.pmj-bh-ctrls{position:absolute;left:14px;top:49px;transform:translateY(-50%);display:flex;align-items:center;gap:10px;z-index:3;}
.pmj-bh-actions{position:absolute;right:14px;top:49px;transform:translateY(-50%);display:flex;align-items:center;gap:8px;z-index:3;}
/* The hamburger is a bordered box on every page. It was a bare glyph on the
   cream headers (dashboard, family, medical, hospital, lovebox...) and a
   bordered one on the green caregiver headers, so the same control looked
   like two different things depending which side of the app you were on.
   Bare, it also sat right against the centred logo. */
.pmj-bh-ctrls .pmj-mtoggle{margin:0;background:none;font-size:22px;line-height:1;color:var(--pamoja-forest-deep);cursor:pointer;border:1px solid var(--pamoja-line-strong);border-radius:var(--pamoja-radius-md);padding:7px 12px;display:inline-flex;align-items:center;}
.pmj-bh-ctrls .pmj-mtoggle:hover{border-color:var(--pamoja-accent);}
/* Same bordered box on the GREEN caregiver top bars. Those pages each carry
   their own .topbar CSS and only some of them happened to style a <button>,
   so the hamburger had a border on caregiver home and none on Visits,
   Medications, Care plan and the rest. Stated once, here. */
.topbar .pmj-mtoggle{border:1px solid rgba(247,242,232,0.4);border-radius:var(--pamoja-radius-md);padding:7px 12px;background:none;display:inline-flex;align-items:center;cursor:pointer;}
.topbar .pmj-mtoggle:hover{border-color:var(--pamoja-accent);}
.pmj-bh-ctrls a.pmj-back{margin:0;display:inline-flex;align-items:center;gap:5px;color:var(--pamoja-accent-deep);text-decoration:none;font-size:15px;white-space:nowrap;}
.pmj-bh-ctrls a.pmj-back:hover{color:var(--pamoja-accent);}
.pmj-bh-logo{height:58px;width:auto;display:block;margin:0 auto 4px;}
.pmj-bh-word{font-family:var(--pamoja-font-body,'Cormorant Garamond',serif);font-size:22px;font-weight:600;color:var(--pamoja-forest-deep);line-height:1;letter-spacing:0.01em;}
.pmj-bh-tag{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;}
.pmj-bh-tag span{font-size:10.5px;letter-spacing:0.30em;text-transform:uppercase;color:var(--pamoja-accent-deep);}
.pmj-bh-tag::before,.pmj-bh-tag::after{content:'';height:1px;width:34px;background:linear-gradient(90deg,transparent,var(--pamoja-accent));opacity:0.6;}
.pmj-banner{background:linear-gradient(135deg,var(--pamoja-forest-deep),var(--pamoja-forest-sheen-deep,#21382F));border-radius:0;margin:0 0 22px 0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:18px 24px;display:flex;align-items:center;justify-content:flex-start;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(26,60,50,.20),0 2px 6px rgba(26,60,50,.16);}
.pmj-banner::after{content:'';position:absolute;top:-14px;right:-14px;width:170px;height:130px;background:url('images/dash-leaf.png') right top/contain no-repeat;opacity:.5;pointer-events:none;z-index:0;}
.pmj-banner>*{position:relative;z-index:1;}
.pmj-banner-title{color:var(--pamoja-ivory,#F7F2E8);margin:0;text-align:left;font-family:var(--pamoja-font-heading,'Playfair Display',serif);font-size:26px;font-weight:600;letter-spacing:.01em;}

/* Header fix: on desktop, when the left rail is present (sidebar.js pages),
   keep the welcome banner within the content area to the right of the rail
   instead of bleeding under it / overflowing right. Mobile keeps full-bleed.
   Excludes dashboard & ops (no .pmj-has-sidebar). */
@media(min-width:901px){body.pmj-has-sidebar .pmj-banner{margin-left:calc(50% - 50vw + 110px);margin-right:calc(50% - 50vw + 110px);}}

/* ── Mobile header geometry ────────────────────────────────────────────────
   Every page put the header in a different wrapper, so the space above the
   logo came out different on each: .alo-wrap adds 28px, .main 20px, and the
   body-level pages (hospital, legacy, lovebox, family) add nothing. Zero the
   wrapper's top padding where the header is the first child and give .pmj-bh
   the offset instead, so all pages match Coordination.

   The header is also pulled to the true viewport edges by pamoja-header.js,
   the same measured pass the banner uses — that is what lets the Alert sit a
   consistent distance from the screen edge instead of being inset by whatever
   padding its wrapper happened to have.

   Mobile only: above 900px none of this applies and the desktop rules govern. */
@media (max-width:900px){
  /* Every page that renders the header: the gap above the logo comes from
     .pmj-bh and nothing else. The locked-in pages (lovebox, medical, dashboard,
     coordination, hospital) only ever set padding-bottom on body, which is why
     they looked right; account uses var(--pamoja-space-5) all round and finances
     28px on top, which pushed their headers down. :has() scopes this to pages
     that actually have the header, so login and auth-callback are untouched. */
  body:has(.pmj-bh){padding-top:0;}
  /* Qualified with body so these beat the pages' own .alo-wrap/.acct-wrap rules:
     this stylesheet is <link>ed in <head>, the page's <style> comes after it, and
     at equal specificity the later rule wins. */
  body .alo-wrap,body .acct-wrap,body .main{padding-top:0;}
  .pmj-bh{padding-top:20px;}
  .pmj-bh-ctrls{left:14px;}
  .pmj-bh-actions{right:10px;}
}

/* Brand watermark. One size, one position on every page: lower-left, clear of
   the clasped-hands art that body::after pins to the lower right, and above the
   bottom nav. Fixed rather than absolute so it does not depend on page height.
   pamoja-header.js places it; family.html's larger one-off was removed so all
   pages match. Mobile only. */
.pmj-watermark{position:fixed;left:16px;bottom:100px;width:120px;height:auto;
  opacity:.07;pointer-events:none;z-index:0;filter:saturate(.6);}
/* Desktop has no bottom nav to clear; pamoja-header.js sets left so it clears the rail. */
@media (min-width:901px){.pmj-watermark{bottom:24px;}}

/* ── Desktop bands, no JavaScript ──────────────────────────────────────────
   body.pmj-has-sidebar already reserves the rail with padding-left:220px, so the
   content box runs from the rail to the edge of the page — margin:0 spans it
   exactly. No vw arithmetic (which double-counted the scrollbar and left a strip
   of dead space) and, more importantly, nothing measured after paint, which is
   what made pages jump on load.

   .patient-header (medical) and .acct-headrow (account) full-bleed with the same
   calc(50% - 50vw) as .pmj-banner but never had a desktop exception, so they ran
   under the rail — that is the overlap on Medical. */
@media (min-width:901px){
  /* Same reasoning as the mobile block: the gap above the logo must come from
     .pmj-bh alone. Measured before this, the banner started at y=143 on the
     plain pages but 170/171 on account and finances (their body pads 27/28px on
     top) and 175/179 on Coordination and Dashboard (.main pads 32/40px) — the
     header spacing that kept reading differently from page to page. */
  body:has(.pmj-bh){padding-top:0;padding-right:0;}
  body .alo-wrap,body .acct-wrap,body .main{padding-top:0;}
  /* .pmj-bh's own margin is 2px, so on desktop the logo sat almost against the
     top of the window — Legacy and Family View most visibly. Same 20px the
     mobile rule uses, so both breakpoints now read the same. */
  .pmj-bh{padding-top:20px;}
  body.pmj-has-sidebar .pmj-bh,
  body.pmj-has-sidebar .pmj-banner,
  body.pmj-has-sidebar .patient-header,
  body.pmj-has-sidebar .acct-headrow{margin-left:0;margin-right:0;}
}

/* Paint the canvas as well as the body. A background set only on body is painted
   in body's box, so any width the box does not cover — the scrollbar gutter most
   visibly — falls through to bare white. Setting the same image on html means the
   canvas is always covered and the artwork reaches every edge. Pages that patch
   body's background still layer on top of this identically. */
html{background:var(--pamoja-ivory,#F7F2E8) url('images/dash-bg.png') center top/cover fixed;background-image:image-set(url('images/dash-bg.webp') type('image/webp'),url('dash-bg.png') type('image/png'));}