/* Concept disclosure for every demo under /demos/ (injected by concept.js).
   Self-contained + prefixed (scs-) so it never collides with a demo's own
   styles. Sits in normal flow at the very top of <body>, above the demo's
   header, so sticky headers keep working. */
.scs-concept-bar {
  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px;
  flex-wrap: wrap; padding: 9px 20px; background: #111; color: #fff;
  font: 600 11px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase; position: relative; z-index: 1000;
}
.scs-concept-bar[data-theme="light"] { background: #f4f2ec; color: #111; }
.scs-concept-bar b { font-weight: 800; }
.scs-concept-bar span { opacity: 0.85; }
.scs-concept-bar a { color: inherit; text-decoration: none; font-weight: 700; white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 1px; opacity: 1; }
.scs-concept-bar a:hover { opacity: 0.75; }
.scs-concept-bar a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.scs-concept-note {
  box-sizing: border-box; padding: 26px 20px 30px; background: #111; color: #c8c8c8; text-align: center;
  font: 400 13px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-top: 1px solid #2a2a2a;
}
.scs-concept-note[data-theme="light"] { background: #f4f2ec; color: #555; border-top-color: #e2ded4; }
.scs-concept-note p { max-width: 68ch; margin: 0 auto 12px; }
.scs-concept-note b { color: inherit; font-weight: 700; }
.scs-concept-note a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin: 0 10px; }
.scs-concept-note a:hover { opacity: 0.75; }

/* Toast for neutralized real-business actions */
.scs-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 10px); z-index: 2147483000;
  max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 12px; background: #111; color: #fff;
  font: 500 13.5px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.scs-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.25s ease, transform 0.25s ease; }
a[data-demo-action] { cursor: pointer; }

/* Prototype forms: shown in place of a real submission */
.scs-demo-form-status {
  margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: #111; color: #fff;
  font: 500 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.scs-demo-form-status b { font-weight: 700; }

@media (max-width: 600px) {
  .scs-concept-bar { padding: 9px 16px; font-size: 10px; letter-spacing: 0.1em; }
  .scs-concept-note { padding: 22px 16px 26px; font-size: 12.5px; }
}