/* Diagram stepper + click-to-zoom lightbox, migrated from crafted.jhooq.com.
   Used by the crafted-steps / crafted-diagram shortcodes. */

/* ---- standalone diagram ---- */
.jq-diagram {
  position: relative;
  margin: 1.25rem 0 1.5rem;
  padding: 0.75rem;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 12px;
  background: #ffffff;
  cursor: zoom-in;
}
.jq-diagram svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.jq-diagram figcaption { font-size: 0.85rem; opacity: 0.75; margin-top: 0.5rem; text-align: center; }

/* ---- stepper ---- */
.jq-steps { margin: 1.25rem 0 1.75rem; }
.jq-steps-rail { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.jq-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.8rem; line-height: 1.2;
  border: 1px solid rgba(128, 128, 128, 0.35); background: transparent; color: inherit;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.jq-pill:hover { border-color: #5b8def; color: #5b8def; }
.jq-pill .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 0.7rem; font-weight: 700;
  background: rgba(128, 128, 128, 0.2);
}
.jq-pill.active { background: linear-gradient(90deg, #5b8def, #8b5cf6); color: #fff; border-color: transparent; }
.jq-pill.active .n { background: rgba(255, 255, 255, 0.25); }
.jq-pill.done { color: #15803d; border-color: #86efac; }
.jq-pill.done .n { background: #bbf7d0; color: #15803d; }

.jq-step[hidden] { display: none; }
.jq-stage {
  position: relative;
  padding: 0.75rem;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 12px;
  background: #ffffff;
  margin-bottom: 0.9rem;
  cursor: zoom-in;
}
.jq-stage svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.jq-zoom-hint {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.72rem; font-weight: 600;
  padding: 0.28rem 0.6rem; border-radius: 999px; pointer-events: none;
  opacity: 0; transition: opacity 0.15s;
}
.jq-stage:hover .jq-zoom-hint, .jq-diagram:hover .jq-zoom-hint { opacity: 1; }

.jq-cmd-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  opacity: 0.75; margin: 0 0 0.35rem;
}
.jq-cmd-label.tf { color: #8b5cf6; opacity: 1; }
.jq-cmd { margin-bottom: 0.9rem; }
.jq-cmd .highlight pre, .jq-cmd pre { margin: 0; }
.jq-cmd.tf .highlight { border-left: 3px solid #8b5cf6; }

.jq-steps-nav { display: flex; align-items: center; gap: 0.75rem; }
.jq-steps-nav button {
  border: 1px solid rgba(128, 128, 128, 0.35); background: transparent; color: inherit;
  border-radius: 8px; padding: 0.45rem 1rem; font-size: 0.9rem; cursor: pointer; font-family: inherit;
}
.jq-steps-nav button:hover:not(:disabled) { border-color: #5b8def; color: #5b8def; }
.jq-steps-nav button:disabled { opacity: 0.4; cursor: default; }
.jq-steps-nav .jq-pos { margin-left: auto; font-size: 0.85rem; opacity: 0.75; }

/* ---- lightbox ---- */
.jq-lightbox {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; padding: 2vh 2vw;
  background: rgba(6, 9, 16, 0.94);
}
.jq-lightbox.open { display: flex; animation: jqFade 0.15s ease; }
@keyframes jqFade { from { opacity: 0; } to { opacity: 1; } }
.jq-lb-inner { width: 96vw; max-width: 1680px; animation: jqPop 0.22s cubic-bezier(.2,.85,.25,1); }
@keyframes jqPop { from { transform: scale(0.9); opacity: 0.3; } to { transform: scale(1); opacity: 1; } }
.jq-lightbox svg {
  width: 100%; height: auto; max-height: 92vh; display: block;
  background: #ffffff; border-radius: 14px; padding: 1.1rem;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}
.jq-lb-close {
  position: fixed; top: 1rem; right: 1.2rem; z-index: 10000;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.55);
  color: #fff; font-size: 1.6rem;
}
.jq-lb-close:hover { background: rgba(255, 255, 255, 0.16); }
.jq-lb-tip {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10000;
  color: #c7cde0; font-size: 0.8rem; background: rgba(0, 0, 0, 0.5);
  padding: 0.35rem 0.9rem; border-radius: 999px;
}

/* ---- migrated section wrapper: compact nested headings ---- */
.jq-section h3 { margin-top: 1.6rem; }
.jq-section h4 { margin-top: 1.2rem; }
.jq-section table { border-collapse: collapse; margin: 0 0 1rem; }
.jq-section th, .jq-section td { border: 1px solid rgba(128, 128, 128, 0.3); padding: 0.4rem 0.7rem; }

/* dark mode (hugo-clarity toggles html[data-mode=dim] / dark) */
html[data-mode="dim"] .jq-diagram, html[data-mode="dark"] .jq-diagram,
html[data-mode="dim"] .jq-stage,   html[data-mode="dark"] .jq-stage { background: #f8fafc; }