/* ===== Shared standalone-module shell =====
   Exact recipes pulled from pha.rentspire.com's own CSS (portal.css / pha-shared.css):
   gv11-band dark header, gv11-matrix light body/related bands.
   Applied across all 15 self-serve demo modules so each reads as its own standalone product.
   G-19 (2026-09-06): the old hardcoded sticky brand+nav bar these pages carried
   (formerly a "gv8"-prefixed block) is removed -- every page under /demos/ now
   loads the shared canonical .rsn-shell from
   rs-nav.js/rs-nav.css (same shell as the rest of the site), so this file no longer owns
   any header markup, only the module-header/toolbar/body/related bands beneath it. */

:root{
  --pha-blue:#10407f; --pha-blue-deep:#163c73; --pha-canvas:#f4f3ef;
  --pha-on-dark:#ffffff; --pha-on-dark-accent:#a9caff; --pha-on-dark-body:#dce8f7; --pha-on-dark-muted:#c2d4ea;
  --accent:#10407f; --accent-bg:#d3e2f7;
}

/* ===== gv11-band: dark navy header ===== */
.module-header{position:relative;overflow:hidden;
  background:linear-gradient(180deg, #0d2340 0%, var(--pha-blue-deep) 100%);
  padding:32px 32px 28px;
}
.module-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:48px 48px;
}
.module-header-inner{position:relative;z-index:1;display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap;max-width:1180px;margin:0 auto}
.crumb2{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--pha-on-dark-muted);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.crumb2 a{color:var(--pha-on-dark-muted);text-decoration:none}
.crumb2 a:hover{color:#fff}
.badge-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.icon-wrap{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.icon-wrap svg{width:24px;height:24px;color:var(--pha-on-dark-accent)}
.badge{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:20px}
.badge-fam{background:rgba(255,255,255,.1);color:var(--pha-on-dark-accent);border:1px solid rgba(255,255,255,.2)}
.badge-live{background:rgba(57,217,138,.15);color:#39d98a}
.badge-limited{background:rgba(255,196,84,.15);color:#ffc454}
.badge-roadmap{background:rgba(148,163,184,.15);color:#94a3b8}
.module-header h1{font-size:32px;font-weight:800;margin:0 0 10px;color:#fff;letter-spacing:-0.01em;line-height:1.15;font-family:Inter,system-ui,sans-serif}
.module-header .dek{font-size:15.5px;color:var(--pha-on-dark-body);max-width:600px;line-height:1.55;margin:0;font-family:Inter,system-ui,sans-serif}
.stat-strip{display:flex;gap:26px;flex:0 0 auto;flex-wrap:wrap}
.stat{text-align:right;border-left:2px solid rgba(169,202,255,.35);padding-left:16px}
.stat b{display:block;font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:800;color:var(--pha-on-dark);letter-spacing:-.02em}
.stat span{font-size:11px;color:var(--pha-on-dark-muted);text-transform:uppercase;letter-spacing:.06em}

/* ===== Toolbar ===== */
.toolbar{background:#fff;border-bottom:1px solid #e5e9ee;padding:12px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.toolbar-left{display:flex;gap:20px;font-size:13px}
.toolbar-left a{color:#6b7684;text-decoration:none;padding-bottom:12px;display:inline-block;cursor:pointer}
.toolbar-left a.active{color:#0f1720;font-weight:700;border-bottom:2px solid var(--accent);margin-bottom:-13px}
.btn{padding:9px 14px;border-radius:8px;font-weight:700;font-size:13px;background:var(--pha-blue);color:#fff;text-decoration:none;border:none;cursor:pointer;display:inline-block}
.btn:hover{background:var(--pha-blue-deep)}

/* ===== Body: light band ===== */
/* WCAG 2.1 SC 1.4.10 (Reflow) fix — 2026-09-03: overflow:hidden here was meant
   only to clip the decorative ::before grid background, but it also clipped
   real child content with no scroll path — found on demo-hotma-verification
   (worksheet input + checkbox label) and demo-inspection-clocks (expanded
   table's citation column), both ~190–420px past the viewport edge at 320px
   with zero way to reach them. overflow-x:auto restores the same clip for the
   ::before background (still position:absolute;inset:0) while giving any
   overflowing child a real scroll path, matching the pattern already used by
   .rs-tblwrap and .gv14-scroll elsewhere on this site. */
.body{position:relative;padding:28px 32px;overflow-x:auto;overflow-y:visible;
  background:linear-gradient(180deg, #f4f3ef 0%, #f4f3ef 100%);
}
.body::before, .related::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(18,49,87,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,49,87,.09) 1px, transparent 1px);
  background-size:48px 48px;
}
.panel{position:relative;z-index:1;max-width:1180px;margin:0 auto}

/* ===== Related-module cards, same light band recipe ===== */
.related{position:relative;padding:8px 32px 44px;overflow:hidden;
  background:linear-gradient(180deg, #f4f3ef 0%, #f4f3ef 100%);
}
.related h3, .related-grid{position:relative;z-index:1;max-width:1180px;margin:0 auto}
.related h3{font-size:12px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:#6b7684;margin:0 auto 14px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rcard{background:#fff;border:1px solid #dbe1e9;border-radius:12px;padding:16px;font-size:13px;text-decoration:none;color:inherit;display:flex;gap:12px;align-items:flex-start;transition:border-color .15s;box-shadow:0 1px 2px rgba(10,20,40,.04)}
.rcard:hover{border-color:var(--accent)}
.rcard .ricon{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--accent-bg);display:flex;align-items:center;justify-content:center}
.rcard .ricon svg{width:17px;height:17px;color:var(--accent)}
.rcard b{display:block;font-size:14px;margin-bottom:3px;color:#0f1720}
.rcard span{color:#6b7684;line-height:1.4}

@media (max-width: 720px){
  .module-header-inner{flex-direction:column;align-items:flex-start;min-width:0;width:100%}
  .module-header-inner > *{min-width:0;max-width:100%}
  .stat-strip{flex-wrap:wrap;gap:16px}
  .related-grid{grid-template-columns:1fr}
}

/* WCAG 2.1 SC 1.4.10 (Reflow) fix — 2026-09-03.
   At <=400px the fixed 32px side padding on .module-header left too little
   room for its flex children (badge row, h1, dek) to fit without overflow;
   audited at 320px on demo-grants-radar, demo-payment-standard-studio, and
   where-and-who. min-width:0 on flex children is the standard fix for a flex
   item defaulting to its content's natural width instead of shrinking. */
@media (max-width: 400px){
  .module-header{padding:20px 16px 18px}
  .module-header h1{font-size:24px;overflow-wrap:break-word;word-break:break-word}
  .module-header .dek{font-size:14px;max-width:100%}
  .badge-row{min-width:0}
  .crumb2{flex-wrap:wrap}
}