/* /demo — layered on theme.css + styles.css + learn/portal.css. The demo REUSES the shipped portal
   component classes; this sheet only adds the demo chrome (the "example candidate" flag, section spacing,
   the CTA) and keeps the inert/disabled controls looking POPULATED rather than greyed-out. Tokens only. */

/* persistent "example candidate" flag — sticky, unmissable, high-contrast */
.demo-flag{position:sticky;top:0;z-index:20;margin:0 0 8px;padding:10px 16px;border-radius:0 0 var(--r) var(--r);
  background:var(--accent);color:#fff;font-weight:var(--fw-semibold,600);font-size:14px;text-align:center;letter-spacing:.01em}

/* each reused surface sits in its own spaced block */
.demo-sec{margin:0 0 30px}
.demo-sec .jh{margin:0 0 12px}
.demo-id{margin-top:8px}
.demo-id .display{margin:6px 0 8px}
.demo-id__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}

/* badge cards in a responsive grid (reuses .award / .award--earned from portal.css) */
.demo-awards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin:0}

/* the one live way out */
.demo-cta{margin:36px 0 8px;padding:24px;border:2px solid var(--accent);border-radius:var(--r-lg,16px);
  background:var(--surface-sunken,#EFECE2);text-align:center}
.demo-cta__line{margin:0 0 14px;font-family:var(--font-display);font-weight:var(--fw-semibold,600);font-size:18px;color:var(--ink);line-height:1.4}
.demo-cta__btn{min-height:44px}

/* Inert controls must still READ as populated (the demo is showing a full account, not a broken form).
   Override the browser's greyed disabled look inside the demo journey only; the reader still can't edit. */
#demo-root [disabled],#demo-root [readonly]{opacity:1;cursor:default}
#demo-root textarea[disabled],#demo-root input[type=text][disabled]{background:#fff;color:var(--ink);-webkit-text-fill-color:var(--ink)}
#demo-root textarea{resize:none}
#demo-root .checkin,#demo-root .tracker,#demo-root .jan-letter,#demo-root .anchor-card{cursor:default}
/* the demo journey takes no pointer/typing input at all (belt + suspenders with disabled/readonly) */
#demo-root input,#demo-root textarea,#demo-root select,#demo-root button{pointer-events:none}

@media(max-width:520px){
  .demo-awards{grid-template-columns:1fr}
  .demo-cta{padding:18px}
}