/* ═══════════════════════════════════════════════════════════════════════
   KIT BUILD GUIDE — rich guide HTML from kit_templates.guide_html
   (admin → Kit templates → Guide & Code → Full build guide).
   Every colour is mixed with the theme's own --bg2/--fg, so the guide reads
   in both the light and dark storefront themes.
   ═══════════════════════════════════════════════════════════════════════ */
.dkg {
  --g-green:  #10b981; --g-teal: #14b8a6; --g-blue: #3b82f6; --g-purple: #8b5cf6;
  --g-rose:   #f43f5e; --g-amber: #f59e0b; --g-slate: #64748b;
  color: var(--fg2); line-height: 1.65; font-size: 15px;
}
.dkg *, .dkg *::before, .dkg *::after { box-sizing: border-box; }
.dkg p { margin: 0 0 12px; }
.dkg b, .dkg strong { color: var(--fg); }
.dkg code {
  font-family: 'JetBrains Mono', monospace; font-size: .86em;
  padding: 1px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--primary) 12%, var(--bg2)); color: var(--fg);
}
.dkg-muted { color: var(--fg3); font-size: 14px; }

/* Hero */
.dkg-hero {
  position: relative; overflow: hidden; border-radius: 18px; padding: 32px 28px;
  margin-bottom: 22px; color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(135deg, #059669 0%, #0d9488 45%, #2563eb 100%);
}
.dkg-hero__eyebrow {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.18); margin-bottom: 12px;
}
.dkg-hero__title { color: #fff; font-size: clamp(22px, 3.2vw, 32px); line-height: 1.2; margin: 0 0 10px; }
.dkg-hero__sub { color: rgba(255,255,255,.92); font-size: 16px; max-width: 720px; margin: 0; }
.dkg-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dkg-hero__chips span {
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.95); color: #065f46;
}

/* Sections + headings */
.dkg-sec { margin: 0 0 26px; }
.dkg-h {
  --c: var(--g-green);
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font-size: 20px; line-height: 1.3; color: var(--fg);
}
.dkg-h span {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: #fff;
  background: var(--c); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 35%, transparent);
}
.dkg-h--green  { --c: var(--g-green); }  .dkg-h--teal   { --c: var(--g-teal); }
.dkg-h--blue   { --c: var(--g-blue); }   .dkg-h--purple { --c: var(--g-purple); }
.dkg-h--rose   { --c: var(--g-rose); }   .dkg-h--amber  { --c: var(--g-amber); }

/* Cards */
.dkg-cards { display: grid; gap: 12px; margin: 0 0 14px; }
.dkg-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dkg-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dkg-card {
  --c: var(--g-green);
  position: relative; border-radius: 14px; padding: 16px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, var(--border));
  border-top: 4px solid var(--c);
  background: color-mix(in srgb, var(--c) 6%, var(--bg2));
}
.dkg-card h4 { margin: 0 0 6px; font-size: 15px; color: var(--fg); line-height: 1.35; }
.dkg-card p { margin: 0; font-size: 14px; }
.dkg-card__ico {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 10px;
  font-size: 18px; color: #fff; background: var(--c);
}
.dkg-card--green { --c: var(--g-green); } .dkg-card--teal { --c: var(--g-teal); }
.dkg-card--blue { --c: var(--g-blue); } .dkg-card--purple { --c: var(--g-purple); }
.dkg-card--rose { --c: var(--g-rose); } .dkg-card--amber { --c: var(--g-amber); }
.dkg-card--slate { --c: var(--g-slate); }
.dkg-pill {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; margin-bottom: 8px;
  color: var(--g-rose); background: color-mix(in srgb, var(--g-rose) 12%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--g-rose) 35%, transparent);
}

/* Callouts */
.dkg-callout {
  --c: var(--g-blue);
  border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; font-size: 14px;
  border-left: 4px solid var(--c);
  background: color-mix(in srgb, var(--c) 10%, var(--bg2));
}
.dkg-cards .dkg-callout { margin: 0; }
.dkg-callout strong { color: var(--fg); }
.dkg-callout--green { --c: var(--g-green); } .dkg-callout--teal { --c: var(--g-teal); }
.dkg-callout--blue { --c: var(--g-blue); } .dkg-callout--purple { --c: var(--g-purple); }
.dkg-callout--rose { --c: var(--g-rose); } .dkg-callout--amber { --c: var(--g-amber); }
.dkg-callout--slate { --c: var(--g-slate); }

/* System flow */
.dkg-flow { list-style: none; counter-reset: dkgf; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dkg-flow li {
  counter-increment: dkgf; position: relative; padding: 14px 14px 14px 52px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg2);
}
.dkg-flow li::before {
  content: counter(dkgf); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--g-blue), var(--g-purple));
}
.dkg-flow b { display: block; margin-bottom: 2px; }
.dkg-flow span { font-size: 13.5px; }

/* Tables */
.dkg-table-wrap { overflow-x: auto; margin: 0 0 14px; border-radius: 12px; border: 1px solid var(--border); }
.dkg-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--bg2); }
.dkg-table th {
  text-align: left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: linear-gradient(90deg, #7c3aed, #2563eb);
}
.dkg-table td { padding: 9px 12px; border-top: 1px solid var(--border); vertical-align: top; }
.dkg-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--fg) 3%, var(--bg2)); }
.dkg-table--trouble th { background: linear-gradient(90deg, #e11d48, #f59e0b); }
.dkg-table--trouble td:first-child { width: 28%; white-space: nowrap; }
.dkg-tag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.dkg-tag--sig { color: #1d4ed8; background: #dbeafe; }
.dkg-tag--pwr { color: #b91c1c; background: #fee2e2; }
.dkg-tag--gnd { color: #334155; background: #e2e8f0; }
.dkg-tag--i2c { color: #6d28d9; background: #ede9fe; }

/* Steps */
.dkg-steps { list-style: none; counter-reset: dkgs; margin: 0; padding: 0; }
.dkg-steps li {
  counter-increment: dkgs; position: relative; padding: 12px 14px 12px 58px; margin-bottom: 8px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--bg2); font-size: 14.5px;
}
.dkg-steps li::before {
  content: counter(dkgs, decimal-leading-zero); position: absolute; left: 14px; top: 11px;
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--g-teal), var(--g-green));
}
.dkg-steps li b { color: var(--fg); }

/* Project cards */
.dkg-project {
  --c: var(--g-green);
  border-radius: 16px; padding: 20px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, var(--bg2)), var(--bg2) 140px);
}
.dkg-project--teal { --c: var(--g-teal); } .dkg-project--blue { --c: var(--g-blue); }
.dkg-project--purple { --c: var(--g-purple); } .dkg-project--green { --c: var(--g-green); }
.dkg-project--rose { --c: var(--g-rose); }
.dkg-project__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dkg-project__head h3 { margin: 0; font-size: 20px; color: var(--fg); }
.dkg-project__badge {
  flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 15px; color: #fff; background: var(--c);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 35%, transparent);
}
.dkg-project__badge img { width: 30px; height: 30px; object-fit: contain; }
.dkg-project__eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--c); font-weight: 700; }
.dkg-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.dkg-meta > div { border-radius: 10px; padding: 10px 12px; background: var(--bg2); border: 1px dashed color-mix(in srgb, var(--c) 45%, var(--border)); font-size: 13.5px; }
.dkg-meta span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--c); margin-bottom: 2px; }

/* Figures (image placements) */
.dkg-figure { margin: 0 0 18px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--bg2); }
.dkg-figure img { display: block; width: 100%; height: auto; }
.dkg-figure figcaption { padding: 8px 12px; font-size: 13px; color: var(--fg3); }
.dkg-figure--sm { max-width: 560px; }

@media (max-width: 900px) {
  .dkg-cards--3, .dkg-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dkg-hero { padding: 24px 18px; }
  .dkg-cards--2, .dkg-cards--3, .dkg-flow, .dkg-meta { grid-template-columns: 1fr; }
  .dkg-project { padding: 16px; }
  .dkg-table--trouble td:first-child { white-space: normal; }
}

/* Sub-heading inside a section, and the amber project colour. */
.dkg-subh { margin: 18px 0 10px; font-size: 16px; color: var(--fg); }
.dkg-project--amber { --c: var(--g-amber); }