/* =====================================================================
 * RentSpire PHA Shared Design System — pha-shared.css
 * ---------------------------------------------------------------------
 * Single source of truth for cross-product visual cohesion. Ship this
 * file, unmodified, in every RentSpire PHA-facing app (rentspire-rr-pro,
 * payment-standard-studio, grants-nofa-radar, housing-locator,
 * cna-pna-studio, inspection-os). App-specific CSS may ADD to these
 * classes but must not redefine --pha-blue / --pha-text / --pha-hairline.
 *
 * Token names are --pha-*, matching the pha-module-kit source of truth
 * (rentspire-bspain/pha-module-kit/src/components/theme.css). Apps whose
 * legacy stylesheet uses a different prefix (e.g. rr-pro's --ft-*) should
 * alias, not fork: --ft-blue: var(--pha-blue); etc.
 *
 * Sections in this file:
 *   1. Tokens (safe to redeclare only if not already defined by the app)
 *   2. Shared header/eyebrow treatment
 *   3. Buttons + badges
 *   4. PHA Solutions cross-sell showcase (redesigned, tiered live/dev)
 *   5. Help chatbot widget (bottom-right, all apps)
 * ===================================================================== */

/* ---------- 1. TOKENS (fallback only — do not override if app defines) ----
   CONTRAST PASS 2026-08-04. The previous values were the washed-out set:
   --pha-blue #2d72d2 measured 4.40:1 on white and --pha-amber #c87619 on
   --pha-amber-bg measured 3.16:1, so the "IN BUILD" tags and the "You are
   here" marker both FAILED WCAG AA as small text. Every foreground/background
   pair below is now computed (see rr-pro-wcag-check.py), not eyeballed, and
   these values are kept identical to the --ft-* set in styles.css so the two
   stylesheets cannot drift apart. Radii tightened to the terminal geometry. */
:root{
  --pha-blue: #1a56a4;          /* 7.21:1 on white card */
  --pha-blue-hover: #123f7c;
  --pha-blue-deep: #163c73;     /* showcase section bg (dark panel) */
  --pha-text: #0a0d11;          /* 19.47:1 on white card */
  --pha-text-secondary: #1d262f;/* 15.32:1 */
  --pha-text-muted: #3b4652;    /*  9.62:1 */
  --pha-hairline: #6f7b89;      /*  4.31:1 on card — a visible edge, not a ghost */
  --pha-hairline-strong: #4a5561;
  --pha-canvas: #eceff4;
  --pha-card: #ffffff;
  --pha-green: #106339;         /* 5.77:1 on --pha-green-bg */
  --pha-green-bg: #d3ead9;
  --pha-amber: #82500a;         /* 5.40:1 on --pha-amber-bg (was 3.16:1 = fail) */
  --pha-amber-bg: #f3e4c8;
  --pha-cyan: #0a5675;          /* 5.79:1 on --pha-cyan-bg */
  --pha-cyan-bg: #d6e9f3;
  /* Foreground set for the always-dark showcase panel. */
  --pha-on-dark: #ffffff;
  --pha-on-dark-accent: #a9caff; /* 6.02:1 on the #163c73 gradient top */
  --pha-on-dark-body: #dce8f7;
  --pha-on-dark-muted: #c2d4ea;
  --pha-font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --pha-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --pha-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pha-radius-sm: 3px;
  --pha-radius-md: 4px;
  --pha-radius-lg: 6px;
  --pha-shadow-card: 0 1px 0 rgba(10,13,17,.05);
  --pha-shadow-pop: 0 24px 64px rgba(16,22,26,.30);
}
/* Dark theme: mirrors the .dark block in styles.css so a shared component
   dropped into any RentSpire PHA app re-skins with the app, not against it. */
.dark{
  --pha-blue: #7ab3ff;          /* 8.18:1 on the dark card */
  --pha-blue-hover: #2a72e0;
  --pha-text: #ffffff;
  --pha-text-secondary: #e7edf3;
  --pha-text-muted: #a7b4c2;
  --pha-hairline: #616d7a;
  --pha-hairline-strong: #8794a1;
  --pha-canvas: #0a0e13;
  --pha-card: #1a212a;
  --pha-green: #48dc9b;
  --pha-green-bg: #0d2f22;
  --pha-amber: #f2b13f;
  --pha-amber-bg: #33260c;
  --pha-cyan: #54c8f5;
  --pha-cyan-bg: #0a2a38;
  --pha-shadow-card: 0 1px 0 rgba(0,0,0,.6);
}

/* ---------- 2. SHARED HEADER TREATMENT ---------------------------------
   A one-line vendor strip so any two apps read as the same family even
   before the showcase loads. Optional per-app: add
   <div class="pha-vendor-strip">RentSpire PHA Solutions</div> right after
   <body>. */
.pha-vendor-strip{
  display:flex; align-items:center; gap:8px;
  background:var(--pha-blue-deep);
  color:var(--pha-on-dark-body);
  font-family:var(--pha-font-mono);
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 20px;
}
.pha-vendor-strip a{ color:var(--pha-on-dark-body); text-decoration:none; opacity:.85; }
.pha-vendor-strip a:hover{ opacity:1; text-decoration:underline; }

/* ---------- 3. BUTTONS + BADGES (shared primitives) -------------------*/
.pha-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--pha-font-body); font-size:13.5px; font-weight:600;
  padding:9px 16px; border-radius:var(--pha-radius-sm);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.pha-btn-primary{ background:var(--pha-blue); color:#fff; }
.dark .pha-btn-primary{ background:#1c5fc9; } /* keeps white-on-blue at 5.95:1 in dark mode */
.pha-btn-primary:hover{ background:var(--pha-blue-hover); }
.pha-btn-ghost{ background:transparent; color:var(--pha-blue); border-color:var(--pha-hairline-strong); }
.pha-btn-ghost:hover{ border-color:var(--pha-blue); background:var(--pha-cyan-bg); }

.pha-tag{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--pha-font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:3px 7px; border-radius:var(--pha-radius-sm); border:1px solid transparent; white-space:nowrap;
}
.pha-tag-live{ color:var(--pha-green); background:var(--pha-green-bg); border-color:var(--pha-green); }
.pha-tag-dev{ color:var(--pha-amber); background:var(--pha-amber-bg); border-color:var(--pha-amber); }
.pha-tag-neutral{ color:var(--pha-text-muted); background:var(--pha-canvas); border-color:var(--pha-hairline); }
/* Beta: further along than "in development" but still explicitly not the
   unqualified word "Live" -- reserved for products whose lifecycle_phase is
   itself "beta", e.g. Rent Reasonableness Pro. Cyan keeps it visually
   distinct from both the green "live" and amber "in development" tags. */
.pha-tag-beta{ color:var(--pha-cyan); background:var(--pha-cyan-bg); border-color:var(--pha-cyan); }

/* =====================================================================
 * 4. PHA SOLUTIONS CROSS-SELL SHOWCASE — redesigned
 * Design goals (owner complaint #1 + #3):
 *  - Distinct tinted section (deep blue) so it visibly separates from
 *    the page instead of blending into flat white.
 *  - Live products get a promoted "featured row" (larger cards, solid
 *    surface, direct link, green LIVE tag). In-development products are
 *    demoted to a compact roadmap list — no more visually treating a
 *    live, buyable product identically to a concept-stage one.
 *  - Every card gets a one-line, concrete benefit statement, not just a
 *    repeated tagline.
 *  - High contrast: white/light cards floating on the dark tinted
 *    section background; clear hover affordance on clickable cards.
 * ===================================================================== */
.pha-showcase{
  background: linear-gradient(180deg, var(--pha-blue-deep) 0%, #0f2947 100%);
  border-top:1px solid var(--pha-hairline);
  padding:64px 20px 72px;
  position:relative;
  overflow:hidden;
}
.pha-showcase.hidden{ display:none; }
/* subtle civic grid texture, not a generic gradient blob */
.pha-showcase::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events:none;
}
.pha-showcase-head{
  max-width:1100px; margin:0 auto 36px; text-align:left; position:relative;
}
.pha-showcase-eyebrow{
  font-family:var(--pha-font-mono);
  font-size:11px; font-weight:700; letter-spacing:.1em;
  color:var(--pha-on-dark-accent); text-transform:uppercase; margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.pha-showcase-eyebrow::before{
  content:""; width:16px; height:2px; background:var(--pha-on-dark-accent); display:inline-block;
}
.pha-showcase-title{
  font-size:28px; font-weight:800; color:var(--pha-on-dark);
  letter-spacing:-.015em; margin:0 0 10px; line-height:1.2;
}
.pha-showcase-sub{
  font-size:14.5px; line-height:1.6; color:var(--pha-on-dark-body); max-width:640px; margin:0;
}

/* --- Featured (live) row ------------------------------------------- */
.pha-showcase-tier-label{
  max-width:1100px; margin:0 auto 14px; position:relative;
  font-family:var(--pha-font-mono); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--pha-on-dark-accent);
}
.pha-showcase-featured{
  max-width:1100px; margin:0 auto 40px; position:relative;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.pha-card-featured{
  background:var(--pha-card);
  border:1px solid transparent;
  border-radius:var(--pha-radius-lg);
  padding:24px;
  display:flex; flex-direction:column;
  min-height:220px;
  box-shadow:var(--pha-shadow-card);
  transition:transform .16s ease, box-shadow .16s ease;
}
a.pha-card-featured{ text-decoration:none; cursor:pointer; }
a.pha-card-featured:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  border-color:var(--pha-blue);
}
.pha-card-featured.pha-card-current{
  background:#eaf2fe; /* light blue wash; --pha-blue on it = 6.83:1 */
  border-color:var(--pha-blue);
}
.pha-card-icon{
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; background:var(--pha-canvas); margin-bottom:14px;
}
.pha-card-featured .pha-card-top{
  display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:2px;
}
.pha-card-name{
  font-size:16.5px; font-weight:800; color:var(--pha-text);
  margin:0 0 6px; letter-spacing:-.01em;
}
.pha-card-tagline{
  font-size:13px; font-weight:600; color:var(--pha-text-secondary);
  margin:0 0 8px; line-height:1.45;
}
.pha-card-benefit{
  font-size:13px; color:var(--pha-text-muted); line-height:1.55;
  margin:0 0 16px; flex:1;
}
.pha-card-benefit::before{ content:"\2713  "; color:var(--pha-green); font-weight:700; }
.pha-card-cta{ margin-top:auto; padding-top:6px; display:flex; align-items:center; justify-content:space-between; }
.pha-card-link{
  font-size:13.5px; font-weight:700; color:var(--pha-blue); text-decoration:none;
  display:inline-flex; align-items:center; gap:4px;
}
.pha-card-featured:hover .pha-card-link{ text-decoration:underline; }
.pha-card-link .arr{ display:inline-block; transition:transform .15s ease; }
a.pha-card-featured:hover .arr{ transform:translateX(3px); }
.pha-card-here{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--pha-font-mono); font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--pha-blue);
}
.pha-card-here::before{ content:"\25CF"; font-size:8px; }

/* --- Roadmap (in-development) compact list -------------------------- */
.pha-showcase-roadmap{
  max-width:1100px; margin:0 auto; position:relative;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--pha-radius-lg);
  padding:8px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:4px;
  align-items:start;
}
.pha-roadmap-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:var(--pha-radius-sm);
  color:var(--pha-on-dark-body);
  text-decoration:none;
  min-width:0;
  height:auto;
}
a.pha-roadmap-item:hover{ background:rgba(255,255,255,.08); }
.pha-roadmap-emoji{ font-size:16px; flex:none; opacity:.9; line-height:1.3; }
.pha-roadmap-text{ min-width:0; flex:1; }
/* Full copy must always render -- never clip or ellipsize taglines.
   Name keeps a soft visual cap via font-size only; taglines wrap to as
   many lines as needed (owner requirement: no truncation, no shortened
   copy, readable at all viewport widths, container must not clip). */
.pha-roadmap-name{ display:block; font-size:12.5px; font-weight:700; color:var(--pha-on-dark); line-height:1.3; overflow-wrap:break-word; word-break:break-word; }
.pha-roadmap-tagline{ display:block; font-size:11px; color:var(--pha-on-dark-muted); line-height:1.4; overflow-wrap:break-word; word-break:break-word; margin-top:4px; height:auto; max-height:none; overflow:visible; white-space:normal; }
.pha-roadmap-item .pha-tag{ flex:none; margin-top:1px; }

.pha-showcase-foot{
  max-width:1100px; margin:32px auto 0; position:relative;
  font-size:12.5px; color:var(--pha-on-dark-muted);
}
.pha-showcase-foot a{ color:var(--pha-on-dark-accent); font-weight:700; text-decoration:none; }
.pha-showcase-foot a:hover{ text-decoration:underline; }

@media (max-width: 860px){
  .pha-showcase-featured{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .pha-showcase{ padding:48px 16px 56px; }
  .pha-showcase-title{ font-size:22px; }
  .pha-showcase-roadmap{ grid-template-columns:1fr; }
}

/* =====================================================================
 * 5. HELP CHATBOT WIDGET — bottom-right, all 6 apps
 * Retrieval-only assistant: answers strictly from a curated per-app
 * knowledge base (pha-kb.json) of product facts + cited HUD references.
 * No free-form LLM generation. Unmatched questions get an honest
 * "I don't have that" + a mailto contact route. See pha-chatbot.js.
 * ===================================================================== */
.pha-chat-launcher{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  width:56px; height:56px; border-radius:50%;
  background:var(--pha-blue); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(16,22,26,.28);
  transition:transform .15s ease, background .15s ease;
}
.pha-chat-launcher:hover{ background:var(--pha-blue-hover); transform:scale(1.05); }
.pha-chat-launcher svg{ width:26px; height:26px; }
.pha-chat-launcher .pha-chat-dot{
  position:absolute; top:4px; right:4px; width:10px; height:10px; border-radius:50%;
  background:var(--pha-green); border:2px solid #fff;
}

.pha-chat-panel{
  position:fixed; right:20px; bottom:88px; z-index:9999;
  width:360px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 140px);
  background:var(--pha-card); border:1px solid var(--pha-hairline);
  border-radius:var(--pha-radius-lg);
  box-shadow:var(--pha-shadow-pop);
  display:none; flex-direction:column; overflow:hidden;
  font-family:var(--pha-font-body);
}
.pha-chat-panel.open{ display:flex; }
.pha-chat-header{
  background:var(--pha-blue); color:#fff; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; flex:none;
}
.pha-chat-header-title{ font-size:14px; font-weight:700; }
.pha-chat-header-sub{ font-size:11px; opacity:.85; margin-top:1px; }
.pha-chat-close{ background:transparent; border:none; color:#fff; cursor:pointer; opacity:.85; padding:4px; }
.pha-chat-close:hover{ opacity:1; }
.pha-chat-disclaimer{
  font-size:10.5px; line-height:1.4; color:var(--pha-text-muted);
  background:var(--pha-canvas); border-bottom:1px solid var(--pha-hairline);
  padding:8px 14px; flex:none;
}
.pha-chat-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.pha-chat-msg{ max-width:88%; font-size:13px; line-height:1.5; padding:9px 12px; border-radius:12px; }
.pha-chat-msg-bot{ background:var(--pha-canvas); color:var(--pha-text); align-self:flex-start; border-bottom-left-radius:2px; }
.pha-chat-msg-user{ background:var(--pha-blue); color:#fff; align-self:flex-end; border-bottom-right-radius:2px; }
.pha-chat-msg-bot a{ color:var(--pha-blue); font-weight:600; }
.pha-chat-cites{ margin-top:6px; font-size:10.5px; color:var(--pha-text-muted); }
.pha-chat-cites a{ color:var(--pha-cyan); text-decoration:none; }
.pha-chat-cites a:hover{ text-decoration:underline; }
.pha-chat-suggestions{ display:flex; flex-direction:column; gap:6px; padding:0 14px 10px; flex:none; }
.pha-chat-suggestion{
  text-align:left; font-size:12px; font-weight:600; color:var(--pha-blue);
  background:var(--pha-canvas); border:1px solid var(--pha-hairline);
  border-radius:var(--pha-radius-sm); padding:8px 10px; cursor:pointer;
}
.pha-chat-suggestion:hover{ border-color:var(--pha-blue); }
.pha-chat-inputrow{ border-top:1px solid var(--pha-hairline); padding:10px; display:flex; gap:8px; flex:none; }
.pha-chat-input{
  flex:1; border:1px solid var(--pha-hairline); border-radius:var(--pha-radius-sm);
  padding:9px 10px; font-size:13px; font-family:var(--pha-font-body); color:var(--pha-text);
}
.pha-chat-input:focus{ outline:none; border-color:var(--pha-blue); }
.pha-chat-send{
  background:var(--pha-blue); color:#fff; border:none; border-radius:var(--pha-radius-sm);
  width:36px; flex:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.pha-chat-send:hover{ background:var(--pha-blue-hover); }

@media (max-width:480px){
  .pha-chat-panel{ width:calc(100vw - 24px); right:12px; bottom:80px; height:70vh; }
  .pha-chat-launcher{ right:16px; bottom:16px; }
}

/* ---------------------------------------------------------------------
   2026-08-04 dark-mode safety. In dark mode --pha-blue is a light accent
   (#7ab3ff) intended for TEXT on dark surfaces. Any component that paints
   white text ON --pha-blue would therefore become white-on-light-blue
   (1.6:1). Those fills are repointed to the solid button blue, where white
   measures 5.95:1. Text uses of --pha-blue are untouched.
   --------------------------------------------------------------------- */
.dark .pha-chat-fab,
.dark .pha-chat-head,
.dark .pha-chat-msg-user,
.dark .pha-chat-send{ background:#1c5fc9; }
.dark .pha-card-featured.pha-card-current{ background:#152a47; }
.dark .pha-showcase{ border-top-color:var(--pha-hairline); }