/* WCG admin: Dad's guidance (2026-10-13). Two parts:
   1. "Rex has done what you asked" card (done-card.js), top of Dashboard and Questions & requests.
   2. Tour look for a first-time computer user (tour.js), layered over the shared walkthrough engine
      (vendor/walkthrough.iife.js, which stays untouched).
   Colours come from the portal's own tokens (admin.css / colors_and_type.css), so dark mode and the
   accent picker carry over. Every animation stops under prefers-reduced-motion. */

/* ── 1. Done card ─────────────────────────────────────────────────────── */
.wcg-done-slot:empty { display: none; }
.dn-card { margin: 0 0 18px; border: 3px solid var(--wf-accent); border-radius: 10px; overflow: hidden;
  background: var(--wf-panel); color: var(--wf-ink); font-size: 17px; line-height: 1.5;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--wf-accent) 45%, transparent), 0 10px 30px color-mix(in srgb, var(--wf-accent) 25%, transparent);
  animation: dn-glow 2.6s ease-in-out infinite; }
@keyframes dn-glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--wf-accent) 18%, transparent), 0 10px 36px color-mix(in srgb, var(--wf-accent) 40%, transparent); } }
.dn-band { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; background: var(--wf-accent); color: #fff; }
.dn-title { margin: 0; font-family: var(--font-display, "Bebas Neue", sans-serif); font-weight: 400; font-size: 34px; line-height: 1.05; letter-spacing: .02em; color: #fff; min-width: 0; overflow-wrap: anywhere; }
.dn-new { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: #fff; color: #8F2A12; font-weight: 800; font-size: 15px; letter-spacing: .12em; }
.dn-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--wf-accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--wf-accent) 70%, transparent); animation: dn-pulse 1.6s ease-out infinite; }
@keyframes dn-pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.dn-body { padding: 16px 18px 18px; background: color-mix(in srgb, var(--wf-accent) 6%, var(--wf-panel)); }
.dn-lead { margin: 0 0 14px; font-size: 18px; }
.dn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dn-item { border: 1px solid var(--wf-line); border-radius: 8px; background: var(--wf-panel); padding: 14px 16px; min-width: 0; }
.dn-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 15px; color: var(--wf-ink-2); }
.dn-code { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 800; font-size: 16px; color: var(--wf-ink); background: var(--wf-accent-soft); padding: 2px 8px; border-radius: 4px; }
.dn-lbl { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wf-ink-2); margin: 0 0 4px; }
.dn-you { margin: 0 0 14px; padding: 8px 12px; border-left: 4px solid var(--wf-line); color: var(--wf-ink); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 17px; }
.dn-rex { padding: 12px 14px; border-radius: 8px; background: color-mix(in srgb, var(--wf-accent) 9%, var(--wf-panel)); border: 1px solid color-mix(in srgb, var(--wf-accent) 30%, transparent); }
.dn-h4 { margin: 10px 0 4px; font-size: 17px; font-weight: 800; color: var(--wf-ink); }
.dn-rex .dn-lbl + .dn-h4 { margin-top: 2px; }
.dn-card .dn-p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--wf-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.dn-card .dn-steps { margin: 0; padding-left: 26px; }
.dn-card .dn-steps li { margin: 4px 0; padding-left: 4px; font-size: 17px; line-height: 1.5; color: var(--wf-ink); overflow-wrap: anywhere; }
.dn-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.dn-btn { flex: 1 1 180px; min-height: 56px; padding: 12px 20px; border-radius: 8px; font: 700 19px/1.2 var(--font-sans, inherit); cursor: pointer; border: 2px solid transparent; }
.dn-go { background: var(--wf-accent); color: #fff; }
.dn-go:hover { filter: brightness(1.07); }
.dn-ok { background: var(--wf-panel); color: var(--wf-ink); border-color: var(--wf-ink); }
.dn-ok:hover { background: var(--wf-hover); }
.dn-btn:focus-visible, .dn-more:focus-visible { outline: 3px solid var(--wf-ink); outline-offset: 3px; }
.dn-more { margin-top: 14px; background: none; border: 0; padding: 8px 0; min-height: 44px; font: 600 16px/1.3 var(--font-sans, inherit); color: var(--wf-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.dn-sr, .wcgt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) {
  .dn-band { padding: 12px 14px; gap: 10px; }
  .dn-title { font-size: 29px; }
  .dn-body { padding: 14px 12px 14px; }
  .dn-item { padding: 12px; }
  .dn-btn { flex-basis: 100%; }
}

/* ── 2. Tour, first-time-user look ───────────────────────────────────── */
/* Doubled class: the engine injects its own stylesheet after this one, so ties would go to it. */
.wt-root.wcgt.wcgt { --wt-scrim: rgba(0, 0, 0, .74); }
.wt-root.wcgt.wcgt[data-wt-scheme="dark"] { --wt-scrim: rgba(0, 0, 0, .82); }
.wt-root.wcgt .wt-ring { padding: 4px; background: var(--wt-accent); }
.wt-root.wcgt .wt-pulse { animation: wcgt-pulse 1.5s ease-out infinite; }
@keyframes wcgt-pulse { 0% { box-shadow: 0 0 0 0 var(--wt-accent); opacity: .85; } 80% { box-shadow: 0 0 0 22px var(--wt-accent); opacity: 0; } 100% { opacity: 0; } }
.wt-root.wcgt .wt-card { width: 440px; padding: 20px 20px 16px; border-radius: 10px; }
.wt-root.wcgt .wt-card::before { opacity: 1; padding: 3px; }
.wt-root.wcgt .wt-title { font-family: var(--font-display, "Bebas Neue", sans-serif); font-weight: 400; font-size: 32px; line-height: 1.05; letter-spacing: .02em; margin: 0 44px 10px 0; }
.wt-root.wcgt .wt-body { font-size: 18px; line-height: 1.55; opacity: 1; }
.wt-root.wcgt .wt-body b, .wt-root.wcgt .wt-body strong { color: inherit; font-weight: 800; }
.wt-root.wcgt .wt-close { width: 44px; height: 44px; top: 10px; right: 10px; font-size: 28px; border-radius: 8px; }
.wt-root.wcgt .wt-dots { display: none; }
.wt-root.wcgt .wt-foot { gap: 10px; margin-top: 18px; }
.wt-root.wcgt .wt-count { flex: 1 0 100%; font-size: 16px; font-weight: 700; color: var(--wt-card-fg); margin: 0 0 2px; }
.wt-root.wcgt .wt-btn { flex: 1 1 0; min-height: 56px; font-size: 19px; font-weight: 700; padding: 12px 18px; border-radius: 8px; border-width: 2px; border-color: currentColor; }
.wt-root.wcgt .wt-btn[data-primary="1"] { border-color: transparent; flex-grow: 2; }
.wt-root.wcgt .wt-btn:disabled { visibility: hidden; }
.wt-root.wcgt .wt-btn:focus-visible, .wt-root.wcgt .wt-close:focus-visible { outline: 3px solid var(--wt-card-fg); outline-offset: 3px; }
.wt-root.wcgt .wt-pointer { display: none; }   /* replaced by the big arrow below */
.wcgt-arrow { position: absolute; width: 64px; height: 64px; pointer-events: none; color: var(--wt-accent);
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 3px 8px rgba(0,0,0,.6)); animation: wcgt-bob 1.1s ease-in-out infinite; }
.wcgt-arrow svg { width: 100%; height: 100%; display: block; transform: rotate(var(--wcgt-rot, 0deg)); }
.wcgt-arrow[hidden] { display: none; }
@keyframes wcgt-bob { 50% { translate: var(--wcgt-bx, 0) var(--wcgt-by, 0); } }
@media (max-width: 480px) {
  .wt-root.wcgt .wt-card { width: calc(100vw - 20px); padding: 16px 14px 12px; }
  .wt-root.wcgt .wt-title { font-size: 28px; }
  .wt-root.wcgt .wt-body { font-size: 17px; }
  .wcgt-arrow { width: 52px; height: 52px; }
}

/* ── 3. Per-page guides (guides.js) ──────────────────────────────────── */
/* "Show me how this page works": under every page title. Pulses the first time a person opens that page. */
.wcg-guide-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 48px; padding: 10px 18px;
  border: 0; border-radius: 8px; background: var(--wf-accent); color: #fff; font: 700 17px/1.2 var(--font-sans, "Montserrat", system-ui, sans-serif);
  cursor: pointer; box-shadow: 0 2px 8px color-mix(in srgb, var(--wf-accent) 30%, transparent); max-width: 100%; text-align: left; }
.wcg-guide-btn:hover { filter: brightness(1.07); }
.wcg-guide-btn:focus-visible { outline: 3px solid var(--wf-ink); outline-offset: 3px; }
.wcg-guide-btn svg { flex: 0 0 auto; }
.wcg-guide-btn.pulse { animation: wcg-guide-pulse 2s ease-out infinite; }
@keyframes wcg-guide-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wf-accent) 55%, transparent); } 70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--wf-accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 900px) { .wcg-guide-btn { width: 100%; justify-content: center; margin-top: 10px; } }

/* The first-visit offer: small, in the corner, never starts the guide by itself. */
.wcg-offer { position: fixed; right: 16px; bottom: 56px; z-index: 960; width: min(380px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 16px 16px 10px; border-radius: 10px; border: 3px solid var(--wf-accent); background: var(--wf-panel, #fff); color: var(--wf-ink);
  box-shadow: 0 12px 34px rgba(0,0,0,.28); animation: wcg-offer-in .3s ease-out; }
@keyframes wcg-offer-in { from { transform: translateY(16px); opacity: 0; } }
.wcg-offer-t { margin: 0 0 12px; font-size: 17px; line-height: 1.45; }
.wcg-offer-b { display: flex; gap: 10px; }
.wcg-offer-b button { flex: 1 1 0; min-height: 56px; border-radius: 8px; font: 700 18px/1.2 var(--font-sans, inherit); cursor: pointer; border: 2px solid transparent; }
.wcg-offer-go { background: var(--wf-accent); color: #fff; flex-grow: 2 !important; }
.wcg-offer-no { background: var(--wf-panel, #fff); color: var(--wf-ink); border-color: var(--wf-ink) !important; }
.wcg-offer-off { display: block; margin: 8px auto 0; min-height: 44px; padding: 6px 10px; background: none; border: 0; color: var(--wf-ink-2);
  font: 600 15px/1.3 var(--font-sans, inherit); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wcg-offer button:focus-visible { outline: 3px solid var(--wf-ink); outline-offset: 3px; }
@media (max-width: 900px) { .wcg-offer { left: 10px; right: 10px; width: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }

/* Help: every guide, grouped like the menu. */
.wcg-gl { border: 1px solid var(--wf-line); border-radius: 4px; }
.wcg-gl summary { min-height: 48px; display: flex; align-items: center; padding: 8px 12px; font-weight: 700; font-size: 16px; cursor: pointer; }
.wcg-gl-group { margin: 10px 12px 4px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wf-ink-3); }
.wcg-gl-item { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 16px); margin: 0 8px 6px; min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--wf-line); border-radius: 4px; background: var(--wf-panel, #fff); color: inherit; font: 600 16px/1.2 var(--font-sans, inherit); text-align: left; cursor: pointer; }
.wcg-gl-item:hover { border-color: var(--wf-accent); }
.wcg-gl-item span { color: var(--wf-accent); font-size: 22px; }

@media (prefers-reduced-motion: reduce) {
  .dn-card, .dn-dot { animation: none !important; }
  .wcg-guide-btn.pulse, .wcg-offer { animation: none !important; }
  .wt-root.wcgt .wt-pulse { animation: none !important; opacity: 0; }
  .wcgt-arrow { animation: none !important; }
}