/* Home-page demo of Click Guide against a pretend admin. Reads brand tokens
   from :root -- defined in tina4press.config.mjs HEAD_STYLE -- so this file
   only ever sets layout and role, never colour values.
   Fallbacks preserve visual intent when the tokens are absent (e.g. rendered
   without the head style during a partial preview). */

#cg-demo { margin: 2rem 0 2.5rem; }
#cg-demo .demo-app { border: 1px solid var(--tp-border, #E8DDE4); border-radius: 12px;
  overflow: hidden; background: var(--tp-bg, #fff); }

/* App chrome: gradient bar reads as the brand and frames the demo the same
   way the site header does. */
#cg-demo .demo-bar { background: var(--brand-gradient, linear-gradient(135deg, #F20982 0%, #ED810E 100%));
  color: #fff; padding: .7rem 1rem; font-weight: 700; display: flex; gap: .6rem; align-items: baseline; }
#cg-demo .demo-bar span { font-weight: 400; opacity: .85; font-size: .85rem; }

#cg-demo .demo-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
#cg-demo .demo-table th, #cg-demo .demo-table td {
  text-align: left; padding: .55rem 1rem;
  border-bottom: 1px solid var(--tp-border, #E8DDE4); }
#cg-demo .demo-table th { font-size: .75rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tp-fg-3, #998090); }
/* Row a walkthrough step lands on. Pink at 8% is subtle enough not to compete
   with the spotlight overlay above it. */
#cg-demo tbody tr.chosen { background: rgba(242, 9, 130, .08); }

#cg-demo .demo-row-action { border: 1px solid var(--tp-border, #E8DDE4); background: var(--tp-bg, #fff);
  color: inherit; border-radius: 7px; padding: .35rem .85rem; font: inherit; font-size: .82rem;
  font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, transform .06s; }
#cg-demo .demo-row-action:hover { border-color: var(--brand-pink, #F20982); color: var(--brand-pink, #F20982); }
#cg-demo .demo-row-action:active { transform: translateY(1px); }

#cg-demo .demo-label { display: block; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tp-fg-3, #998090);
  margin: 1rem 1rem .35rem; }

#cg-demo .demo-input { width: calc(100% - 2rem); margin: 0 1rem; padding: .6rem .75rem;
  border: 1px solid var(--tp-border, #D5C4CC); border-radius: 8px; font: inherit;
  background: var(--tp-bg, #fff); color: inherit; transition: border-color .15s, box-shadow .15s; }
#cg-demo .demo-input:focus { outline: none;
  border-color: var(--brand-pink, #F20982);
  box-shadow: 0 0 0 3px rgba(242, 9, 130, .12); }

#cg-demo .demo-save { margin: 1rem; padding: .6rem 1.2rem; border: 0; border-radius: 9px;
  background: var(--brand-gradient, linear-gradient(135deg, #F20982 0%, #ED810E 100%));
  color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 8px rgba(242, 9, 130, .25);
  transition: transform .06s, box-shadow .15s, opacity .15s; }
#cg-demo .demo-save:hover { box-shadow: 0 4px 16px rgba(242, 9, 130, .35); opacity: .92; }
#cg-demo .demo-save:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(242, 9, 130, .25); }

/* Confirmation. Green rather than brand, because status must be universally
   interpretable -- the brand guide is explicit about not colouring status
   messages with brand tokens (see badges & status). */
#cg-demo .demo-note { margin: 0 1rem 1rem; font-size: .85rem; color: #065F46;
  font-weight: 600; opacity: 0; transition: opacity .2s; }
#cg-demo .demo-note.shown { opacity: 1; }

#cg-demo .demo-controls { display: flex; gap: .7rem; margin-top: 1.1rem; flex-wrap: wrap;
  align-items: center; }
#cg-demo .demo-controls button { display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 10px; padding: .7rem 1.35rem; font: inherit; font-weight: 600;
  font-size: .92rem; cursor: pointer; line-height: 1;
  transition: transform .06s, box-shadow .15s, border-color .15s, color .15s, opacity .15s; }
#cg-demo .demo-controls button:active { transform: translateY(1px); }
#cg-demo .demo-controls button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }

/* Primary carries the pink -> orange identity gradient. Reserved for the
   single most important CTA per screen; on this demo, the button that starts
   the walkthrough. */
#cg-demo .demo-primary { border: 0; color: #fff;
  background: var(--brand-gradient, linear-gradient(135deg, #F20982 0%, #ED810E 100%));
  box-shadow: 0 2px 8px rgba(242, 9, 130, .25); }
#cg-demo .demo-primary::before { background: #fff; opacity: .9; }
#cg-demo .demo-primary:hover { box-shadow: 0 4px 16px rgba(242, 9, 130, .35); opacity: .92; }

/* Secondary sits alongside the primary. Outlined in pink and lit only on hover
   so the primary keeps the visual weight. */
#cg-demo .demo-secondary { background: transparent; color: inherit;
  border: 1.5px solid var(--tp-border, #E8DDE4); }
#cg-demo .demo-secondary::before { background: var(--brand-orange, #ED810E); }
#cg-demo .demo-secondary:hover { border-color: var(--brand-pink, #F20982); color: var(--brand-pink, #F20982); }
#cg-demo .demo-secondary::before { animation: cg-blip 1.6s ease-in-out infinite; }
@keyframes cg-blip { 50% { opacity: .3; } }

#cg-demo .demo-caption { font-size: .85rem; color: var(--tp-fg-2, #5C4048); margin-top: 1rem; }