/* Digital Facade Playbook — guide pages. Sits on top of /styles.css +
   /theme.css, so every EDC's brand applies automatically. */

body.guide-page { background: var(--paper); }
a.scan-again { text-decoration: none; display: inline-block; }
.guide { max-width: 720px; margin: 0 auto; padding: 16px 20px 48px; }

.crumb {
  display: inline-block; margin: 8px 0 4px;
  color: var(--muted); font-size: 14px; text-decoration: none; font-weight: 700;
}
.crumb:hover { color: var(--primary); }

.guide .kicker {
  font: 700 12px/1 var(--font-body); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin: 18px 0 10px;
}
.guide h1 { font-size: clamp(30px, 6vw, 44px); margin: 0 0 10px; }
.guide .lede { font-size: 17px; color: var(--muted); margin: 0 0 26px; max-width: 58ch; }
.guide h2 { font-size: 22px; margin: 34px 0 10px; }
.guide p, .guide li { font-size: 16px; }
.guide ol.steps-list { padding-left: 22px; display: grid; gap: 12px; margin: 12px 0; }
.guide ol.steps-list b { color: var(--ink); }

/* callouts */
.box {
  border-radius: 14px; padding: 16px 18px; margin: 22px 0;
  border-left: 4px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, var(--paper));
  font-size: 15px;
}
.box b { display: block; margin-bottom: 4px; }
.box-do {
  border-left-color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, var(--paper));
}
.box-warn {
  border-left-color: var(--alert);
  background: color-mix(in srgb, var(--alert) 8%, var(--paper));
}
.box-tip {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
}

/* end-of-guide CTA back into the scanner */
.guide-cta {
  background: linear-gradient(150deg, var(--primary), var(--primary-deep));
  border-radius: var(--radius-lg); color: #fff;
  padding: 26px; margin-top: 40px;
}
.guide-cta h2 { margin: 0 0 8px; color: #fff; }
.guide-cta p { color: rgba(255, 255, 255, 0.88); margin: 0 0 18px; }

/* index cards */
.guide-cards { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 560px) { .guide-cards { grid-template-columns: 1fr 1fr; } }
.gcard {
  display: block; padding: 18px 20px; text-decoration: none;
  background: #fff; border: 2px solid var(--mist); border-radius: var(--radius-lg);
  transition: border-color 150ms ease, transform 160ms var(--ease-out);
}
.gcard:hover { border-color: var(--secondary); }
.gcard:active { transform: scale(0.98); }
.gcard .g-num {
  display: inline-grid; place-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--primary); color: #fff;
  font: 700 13px var(--font-body); margin-bottom: 10px;
}
.gcard h3 { margin: 0 0 4px; font-size: 19px; color: var(--ink); }
.gcard p { margin: 0; color: var(--muted); font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .gcard, .gcard:active { transition: border-color 150ms ease; transform: none; }
}

/* "start here" band on the guides index — sits above the numbered 7-part
   list, same card component, different badge glyph instead of a number */
.guide-cards.start-here { margin-top: 22px; }
.guide-intro { margin: 0 0 6px; color: var(--muted); font-size: 15px; }

/* reusable "copy this AI prompt" block — used by getting-started.html and
   google-account-access.html, built generic so any future guide can drop
   one in. Theming rides the shared CSS variables, so it adapts to every
   EDC skin (classic/civic/split) with no extra per-skin overrides. */
.ai-prompt {
  border-radius: 14px; padding: 18px 20px 20px; margin: 24px 0;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 35%, transparent);
  background: color-mix(in srgb, var(--primary) 5%, var(--paper));
}
.ai-prompt-label {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font: 700 12px/1 var(--font-body); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--primary);
}
.ai-prompt-label .ai-prompt-icon { font-size: 14px; }
.ai-prompt-text {
  font-family: var(--font-body); font-size: 14.5px;
  line-height: 1.6; color: var(--ink); margin: 0 0 16px;
}
.ai-prompt-text p { margin: 0 0 10px; }
.ai-prompt-text p:last-child { margin-bottom: 0; }
.ai-prompt-copy {
  display: inline-flex; align-items: center; gap: 8px; border: none;
  border-radius: var(--radius-pill); padding: 10px 20px 10px 16px;
  background: var(--primary); color: #fff; font: 700 13.5px var(--font-body);
  cursor: pointer; transition: transform 150ms var(--ease-out), opacity 150ms ease;
}
.ai-prompt-copy:hover { filter: brightness(1.08); }
.ai-prompt-copy:active { transform: scale(0.96); }
.ai-prompt-copy:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ai-prompt-copy .cp-icon { font-size: 15px; line-height: 1; }
.ai-prompt-copy .cp-text { position: relative; display: inline-block; min-width: 98px; height: 1.1em; text-align: left; }
.ai-prompt-copy .cp-default,
.ai-prompt-copy .cp-done {
  position: absolute; inset: 0; white-space: nowrap;
  transition: opacity 180ms ease, transform 180ms var(--ease-out);
}
.ai-prompt-copy .cp-default { opacity: 1; transform: translateY(0); }
.ai-prompt-copy .cp-done { opacity: 0; transform: translateY(4px); }
.ai-prompt-copy.is-copied { background: var(--success); }
.ai-prompt-copy.is-copied .cp-default { opacity: 0; transform: translateY(-4px); }
.ai-prompt-copy.is-copied .cp-done { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .ai-prompt-copy { transition: opacity 120ms linear; }
  .ai-prompt-copy:active { transform: none; }
  .ai-prompt-copy .cp-default, .ai-prompt-copy .cp-done { transition: opacity 120ms linear; transform: none; }
}

/* config-driven "contact your EDC" panel (Article 2) — same book/mail CTA
   pattern as the main site's #cta-book/#cta-mail (app.js applyBranding),
   but class-scoped: guide articles duplicate content per language instead
   of translating in place, so a page-unique id would collide across the
   hidden EN/ES blocks. guides.js hides each link individually when its
   config key (EDC.calendly_url / EDC.contact_email) is absent. */
.guide-cta .cta-actions { margin-top: 4px; }

/* ---------------------------------------------------------------------
   "Do this" step-card reskin — CSS ONLY, scoped to body.layout-split.
   Every guide's ol.steps-list already wraps the lead-in instruction in
   <b>; nothing here changes markup. The classic skin never sets
   body.layout-split, so its plain numbered-list rendering is untouched
   (verify by toggling the class off). Badge visual language matches
   .gcard .g-num above. */
body.layout-split .guide ol.steps-list {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
  gap: 14px;
}
body.layout-split .guide ol.steps-list li {
  counter-increment: step;
  position: relative;
  background: var(--mist);
  border-radius: var(--radius-lg, 14px);
  padding: 16px 20px 16px 58px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
body.layout-split .guide ol.steps-list li::before {
  content: counter(step);
  position: absolute;
  top: 16px;
  left: 18px;
  display: inline-grid;
  place-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font: 700 13px var(--font-body);
}
body.layout-split .guide ol.steps-list li b {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

/* ---------------------------------------------------------------------
   Shareable stat card — one per language block, added right after each
   guide's <h1>. Hidden by default so the classic skin's DOM carries the div
   (byte-identical render); shown only under body.layout-split. Visual language
   matches .guide-cta (same gradient direction family, white text) so it
   reads as part of the same system, not bolted on. Number/headline uses
   var(--font-display) — the config-driven display font (Montserrat for
   Weslaco's split skin) — so it reskins automatically per EDC. */
.stat-card { display: none; }
body.layout-split .stat-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 4px 0 22px;
  padding: 20px 22px;
  border-radius: var(--radius-lg, 14px);
  background: linear-gradient(155deg, var(--primary), var(--primary-deep));
  color: #fff;
}
body.layout-split .stat-card .stat-num {
  flex: 0 1 38%;
  font: 800 clamp(21px, 4.6vw, 34px)/1.12 var(--font-display);
  letter-spacing: 0.01em;
}
body.layout-split .stat-card .stat-copy {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.layout-split .stat-card .stat-copy p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
body.layout-split .stat-card .stat-tag {
  font: 700 11px/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 480px) {
  body.layout-split .stat-card { flex-direction: column; align-items: flex-start; gap: 8px; }
  body.layout-split .stat-card .stat-num { flex: none; }
}

/* ---------------------------------------------------------------------
   Hub page (guides/index.html) reskin — CSS ONLY, scoped to body.layout-
   split. The classic skin never sets body.layout-split, so its plain .gcard
   grid and circular .g-num badges stay byte-identical (verify by toggling
   the class off). Two pieces:
   1) .g-num badges get the same bold circular-badge weight already
      established by ol.steps-list li::before above — bigger, heavier,
      same var(--primary) fill.
   2) .gcard itself gets a colored top accent + slightly bolder card
      treatment so the hub reads as distinctly this EDC's, not a
      recolored copy of the classic skin's. */
body.layout-split .gcard {
  border-top-width: 4px;
  border-top-color: var(--primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
body.layout-split .gcard:hover {
  border-top-color: var(--primary-deep, var(--primary));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
body.layout-split .gcard .g-num {
  width: 40px;
  height: 40px;
  font: 800 16px var(--font-body);
  background: linear-gradient(155deg, var(--primary), var(--primary-deep, var(--primary)));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 35%, transparent);
}