/* /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}
/* Q610 — the viral-loop Share action, a secondary affordance under the primary create-profile CTA */
.demo-cta__share{display:inline-block;margin:12px 0 0}
.demo-cta__note{margin:12px 0 0;color:var(--muted,#56535F);font-size:14px}

/* Q596 — the sandbox tour: a responsive gallery of tool cards. Each card is the CANONICAL .card frame (frame comes
   from styles.css); .demo-tool only lays out its contents + hover, never re-declares the frame (check-cards safe). */
.demo-tools-sec{margin:36px 0 0}
.demo-tools-sec .eyebrow{margin:0}
.demo-tools-sec .display{margin:6px 0 6px}
.demo-tools-lead{margin:0 0 16px;color:var(--muted,#56535F)}
.demo-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:0}
.demo-tool{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink,#121016)}
.demo-tool h3{margin:0;font-size:var(--fs-h4,17px)}
.demo-tool__d{margin:0;flex:1;color:var(--muted,#56535F);font-size:14px;line-height:1.45}
.demo-tool__go{margin:6px 0 0;font-weight:var(--fw-semibold,600);color:var(--accent,#2238FF)}
.demo-tool:focus-visible{outline:var(--focus-ring);outline-offset:3px}

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

/* Q599 — the fixed mobile dock (≤760, portal.css) overlaps the demo CTA (a #main sibling outside #portal).
   Clear it: give the demo page's main bottom room for the dock height + the iOS safe-area. */
@media(max-width:760px){
  #main{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media(max-width:560px){
  .demo-awards{grid-template-columns:1fr}
  .demo-tools{grid-template-columns:1fr}
  .demo-cta{padding:18px}
}

/* Q594 — the tool demo sandboxes (demo/budget, demo/postcards) reuse the REAL tool UI in read-only demo mode.
   Inert DATA fields still read as populated (the demo shows a funded, worked-through account, not a broken form);
   genuinely-inert buttons (e.g. the postcard filter presets) keep the disabled look so intent stays honest. */
.demo-sandbox input[disabled],.demo-sandbox select[disabled],.demo-sandbox textarea[disabled]{
  opacity:1;cursor:default;background:var(--surface,#fff);color:var(--ink);-webkit-text-fill-color:var(--ink)}