/* =====================================================================
 * 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: #10407f;          /* 7.21:1 on white card */
  --pha-blue-hover: #0b3268;
  --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: #f4f3ef;
  --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);
}

/* Full-page light graph canvas for standalone and embedded demos. */
body{background:
  radial-gradient(1100px 600px at 50% -10%, var(--pha-cyan-bg), transparent 60%),
  linear-gradient(rgba(148,163,184,.16) 1px, transparent 1px),
  linear-gradient(90deg, rgba(148,163,184,.16) 1px, transparent 1px);
  background-size:auto,46px 46px,46px 46px;
  background-attachment:fixed;
  background-color:var(--pha-canvas)}

/* ---------- 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:11px; 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); margin:0; /* full container width (owner 2026-08-08) */
}

/* --- 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);
}
/* Translucent tiles on the blue-grid band (owner directive 2026-08-06:
   "GET RID OF THE WHITE CARDS AND REVERT BACK TO THE TRANSLUCENT STYLE
   WITH BLUE GRID BACKGROUND AND FAINT CONTAINER"). The tier grid itself
   is the faint outer container; every card is a translucent inner tile.
   All text inside uses the on-dark foreground set. */
.pha-showcase-featured{
  max-width:1160px; margin:0 auto 34px; position:relative;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--pha-radius-lg);
  padding:10px;
}
.pha-card-featured{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--pha-radius-lg);
  padding:18px 20px;
  display:flex; flex-direction:column;
  min-height:0;
  transition:background .16s ease, border-color .16s ease;
}
a.pha-card-featured{ text-decoration:none; cursor:pointer; }
a.pha-card-featured:hover{
  background:rgba(255,255,255,.10);
  border-color:var(--pha-on-dark-accent);
}
.pha-card-featured.pha-card-current{
  background:rgba(169,202,255,.12);
  border-color:var(--pha-on-dark-accent);
}
.pha-card-icon{
  width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; background:rgba(255,255,255,.09); margin-bottom:10px;
}
.pha-card-featured .pha-card-top{
  display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:2px;
}
.pha-card-name{
  font-size:16px; font-weight:800; color:var(--pha-on-dark);
  margin:0 0 5px; letter-spacing:-.01em;
}
.pha-card-tagline{
  font-size:12.5px; font-weight:600; color:var(--pha-on-dark-body);
  margin:0 0 7px; line-height:1.45;
}
.pha-card-benefit{
  font-size:12.5px; color:var(--pha-on-dark-muted); line-height:1.5;
  margin:0 0 12px; 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:13px; font-weight:700; color:var(--pha-on-dark-accent); 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-on-dark-accent);
}
.pha-card-here::before{ content:"\25CF"; font-size:11px; }

/* --- 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; }

/* On-dark chip variants: chips sit on translucent tiles, so the light
   pastel chip backgrounds are swapped for translucent fills. */
.pha-showcase .pha-tag-live{ color:#48dc9b; background:rgba(72,220,155,.12); border-color:rgba(72,220,155,.5); }
.pha-showcase .pha-tag-dev{ color:#ffce7a; background:rgba(255,206,122,.10); border-color:rgba(255,206,122,.45); }
.pha-showcase .pha-tag-beta{ color:#7fd4ff; background:rgba(127,212,255,.10); border-color:rgba(127,212,255,.45); }
.pha-showcase .pha-tag-neutral{ color:var(--pha-on-dark-muted); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); }
.pha-showcase .pha-card-benefit::before{ color:#48dc9b; }

/* Dev tier: two wider columns — larger sections, still dense. */
.pha-showcase-devgrid{ grid-template-columns:repeat(2, 1fr); }
.pha-tag-live-ondark{ color:var(--pha-green, #48dc9b); }
@media (max-width: 860px){
  .pha-showcase-featured, .pha-showcase-devgrid{ 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:12px; bottom:16px; 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:12px; bottom:78px; 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:11px; 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:11px; 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); }

/* --- v3: In-development tier as full cards + live meters ------------- */
/* roadmap-live.js fills .rl-mount / #roadmap-live-strip with REAL counts
   from public.roadmap_module_metric (refreshed by pg_cron every 10 min).
   If the metrics API is unreachable, the strip renders empty and each
   mount shows the honest "no live meters yet" chip — never a fake bar. */
.pha-showcase-devgrid{ margin-top:0; }
.pha-dev-card{ display:flex; flex-direction:column; }
.pha-dev-card .pha-card-benefit{ flex:0 0 auto; }
.pha-dev-card .rl-mount{ flex:1 1 auto; margin:12px 0 6px; }
.pha-dev-card .pha-card-cta{ margin-top:auto; }
.pha-dev-card .pha-card-link{ text-decoration:none; color:var(--pha-on-dark-accent); font-weight:700; font-size:13px; }
.pha-dev-card .pha-card-link:hover{ text-decoration:underline; }

.rl-strip{
  max-width:1100px; margin:0 auto 18px; position:relative;
}
.rl-strip:empty{ display:none; }
.rl-strip-head{
  display:flex; align-items:center; gap:8px;
  font-family:var(--pha-font-mono); font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--pha-on-dark-muted);
  margin-bottom:10px;
}
.rl-strip-ts{ font-weight:500; text-transform:none; letter-spacing:0; opacity:.8; }
.rl-strip-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px;
}
.rl-strip-item{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--pha-radius-sm); padding:10px 12px; min-width:0;
}
.rl-strip-val{
  display:block; font-family:var(--pha-font-mono); font-size:17px; font-weight:700;
  color:var(--pha-on-dark); line-height:1.2; overflow-wrap:break-word;
}
.rl-strip-target{ font-size:11px; font-weight:600; color:var(--pha-on-dark-muted); }
.rl-strip-label{
  display:block; font-size:11px; color:var(--pha-on-dark-muted);
  line-height:1.35; margin-top:3px; overflow-wrap:break-word;
}
.rl-strip-drain .rl-strip-val{ color:#f0b35c; }
.rl-drain-chip{
  display:inline-block; font-family:var(--pha-font-mono); font-size:11px;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#f0b35c; border:1px solid rgba(240,179,92,.45); border-radius:4px;
  padding:0 4px; margin-left:4px; vertical-align:1px;
}

/* breathing pulse dot — the "alive" indicator */
.rl-pulse{
  width:8px; height:8px; border-radius:50%; background:#39d98a; flex:none;
  animation:rlPulse 2.4s ease-in-out infinite;
}
@keyframes rlPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(57,217,138,.55); opacity:1; }
  50%{ box-shadow:0 0 0 6px rgba(57,217,138,0); opacity:.65; }
}
@media (prefers-reduced-motion: reduce){ .rl-pulse{ animation:none; } }

/* per-card meters */
.rl-meter{ margin-bottom:10px; }
.rl-meter:last-child{ margin-bottom:0; }
.rl-meter-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.rl-meter-label{ font-size:11px; color:var(--pha-on-dark-muted); line-height:1.35; overflow-wrap:break-word; min-width:0; }
.rl-meter-val{
  font-family:var(--pha-font-mono); font-size:13px; font-weight:700;
  color:var(--pha-on-dark); white-space:nowrap; flex:none;
}
.rl-meter-target{ font-size:11px; font-weight:600; color:var(--pha-on-dark-muted); }
.rl-bar{
  height:5px; border-radius:3px; background:rgba(255,255,255,.10);
  overflow:hidden; margin-top:5px;
}
.rl-bar-fill{
  height:100%; border-radius:3px; min-width:2px;
  background:linear-gradient(90deg,#2f81f7,#39d98a);
  transition:width .8s ease;
}
.rl-bar-pct{
  font-family:var(--pha-font-mono); font-size:11px; font-weight:600;
  color:var(--pha-on-dark-muted); margin-top:3px;
}
.rl-drain{
  font-family:var(--pha-font-mono); font-size:11px; font-weight:600;
  color:#f0b35c; margin-top:3px;
}
.rl-none{
  font-family:var(--pha-font-mono); font-size:11px; font-weight:600;
  color:var(--pha-on-dark-muted); border:1px dashed rgba(255,255,255,.22);
  border-radius:var(--pha-radius-sm); padding:8px 10px; text-align:center;
}

/* ============ Wave 6 (2026-08-31, UX crew): one consistent signed-in
   cross-link band on every public demo — "the demo is the trailer, the
   portal is the product." Self-contained colors so it reads on both the
   light demo pages and the dark portal-styled ones. ============ */
.rs-twin-cta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:18px 0;
  padding:12px 16px;border:1px solid rgba(120,135,155,.4);border-left:3px solid #2f81f7;
  border-radius:8px;font:500 13.5px/1.55 Inter,system-ui;background:rgba(47,129,247,.07);
  max-width:100%;box-sizing:border-box;}
.rs-twin-cta strong{font-weight:700;}
.rs-twin-cta a{font-weight:700;color:#2f81f7;text-decoration:none;white-space:nowrap;max-width:100%;}
.rs-twin-cta a:hover{text-decoration:underline;}
/* VPAT 400%-reflow fix (G-10): at narrow effective viewports (e.g. 1280px @ 400% zoom
   = ~320px CSS px), the CTA link's forced single line ("Open Payment standards in the
   PHA workspace \2192" and similar) no longer fits and was being clipped at the right edge
   with no page-level scrollbar to reveal it -- a real WCAG 1.4.10 Reflow failure caught
   by Playwright viewport-fit checks. Below 480px, let the link wrap like ordinary text
   instead of forcing one unbreakable line. */
@media (max-width:480px){
  .rs-twin-cta a{white-space:normal;word-break:break-word;}
}

/* D-16 (2026-09-11 defect audit): sync the visually-hidden skip-link pattern from root
   pha-shared.css (Wave 4 VPAT 2.4.1 Bypass Blocks). Embedded demo pages under
   /demos/ load THIS stylesheet, not the root one, and were rendering the skip-link
   as plaintext at top-of-page because the class was missing here. */
.skip-link{position:fixed;z-index:200;top:-4rem;left:1rem;padding:.7rem .9rem;color:#fff;background:#0e2440;border:2px solid #9cc2f2;border-radius:6px;font-weight:800;text-decoration:none}
.skip-link:focus{top:1rem;outline:3px solid #fff;outline-offset:2px}