/* ============================================
   DIAGNOSTIC — CPDS service-business visual system
   ------------------------------------------------
   The site's distinctive visual language: not cards
   and product mockups, but a diagnosis of where a
   service business leaks work, and where CPDS fixes it.

   Restrained palette only — charcoal, warm service-paper,
   warm grey, one teal "working" signal, leak colour for a
   dropped step. Flat by default, structural not glowy.
   Prefix: dg-
   ============================================ */

/* ---------- DIAGNOSTIC SURFACE + GRID TEXTURE ---------- */

.dg-surface {
  background: var(--colour-paper);
  border: 1px solid var(--colour-warm-line);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

/* Faint engineering-paper grid — grounds a panel as a "map"
   without the flat-vector sterility the audit flagged. */
.dg-grid-surface {
  position: relative;
  background-color: var(--colour-paper);
  background-image:
    linear-gradient(to right, rgba(12, 12, 12, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12, 12, 12, 0.035) 1px, transparent 1px);
  background-size: 26px 26px;
}

.dg-surface-dark.dg-grid-surface {
  background-color: var(--surface-dark);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* ---------- SHARED MICRO-LABEL ---------- */

.dg-label {
  display: inline-block;
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-tertiary);
}

/* ============================================
   1. JOURNEY / LEAK MAP  (.dg-journey)
   The signature device. A service-business journey
   runs left→right on desktop, top→bottom on mobile.
   A baseline threads numbered nodes; a flagged stage
   shows exactly where the work leaks.
   ============================================ */

.dg-journey {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-5);
}

.dg-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* baseline running through the node centres */
.dg-stage::before {
  content: '';
  position: absolute;
  top: 17px;
  left: 0;
  right: calc(-1 * var(--space-5));
  height: 2px;
  background: var(--colour-warm-line);
  z-index: 0;
}
.dg-stage:last-child::before { display: none; }

.dg-stage-node {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--surface-primary);
  border: 2px solid var(--colour-warm-line);
  color: var(--colour-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.dg-stage-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dg-stage-name {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--colour-text-primary);
  line-height: var(--line-height-tight);
}

.dg-stage-desc {
  font-size: var(--font-size-body-small);
  color: var(--colour-text-secondary);
  line-height: var(--line-height-body);
}

/* working/clean stage */
.dg-stage.is-ok .dg-stage-node {
  border-color: var(--signal-ok-line);
  color: var(--colour-teal-deep);
  background: var(--signal-ok-tint);
}

/* the leak — the one earned attention moment */
.dg-stage.is-leak .dg-stage-node {
  border-color: var(--signal-leak);
  color: var(--signal-leak);
  background: var(--signal-leak-tint);
}
.dg-stage.is-leak::after {
  content: '';
  position: absolute;
  top: 36px;
  left: 17px;
  width: 2px;
  height: var(--space-5);
  background: linear-gradient(to bottom, var(--signal-leak), transparent);
  z-index: 0;
}

.dg-stage-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin-top: var(--space-1);
  padding: 3px 9px;
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  color: var(--signal-leak);
  background: var(--signal-leak-tint);
  border: 1px solid var(--signal-leak-line);
  border-radius: var(--radius-pill);
}

/* mobile: journey becomes a vertical trail */
@media (max-width: 720px) {
  .dg-journey {
    grid-auto-flow: row;
    gap: 0;
  }
  .dg-stage {
    flex-direction: row;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
  }
  .dg-stage::before {
    top: 36px;
    bottom: 0;
    left: 17px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .dg-stage:last-child::before { display: none; }
  .dg-stage.is-leak::after { display: none; }
  .dg-stage-node { flex-shrink: 0; }
  .dg-stage-body { display: flex; flex-direction: column; gap: var(--space-2); padding-top: 5px; }
  .dg-stage-name { margin-top: 0; }
}

/* ============================================
   2. ANNOTATED ROWS  (.dg-rows)
   Replaces card grids. Each row reads across:
   stage → where it leaks → the CPDS fix.
   ============================================ */

.dg-rows {
  border: 1px solid var(--colour-warm-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-primary);
}

.dg-row {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr 1.15fr;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--colour-border-soft);
}
.dg-row:last-child { border-bottom: none; }
.dg-row:nth-child(even) { background: var(--colour-paper); }

.dg-row-head {
  background: var(--colour-charcoal);
  color: var(--colour-text-inverse);
}
.dg-row-head .dg-row-cell {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-inverse-muted);
}

.dg-row-stage {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.dg-row-num {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--colour-text-tertiary);
}
.dg-row-title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--colour-text-primary);
  line-height: var(--line-height-tight);
}

.dg-row-cell {
  font-size: var(--font-size-body-small);
  color: var(--colour-text-secondary);
  line-height: var(--line-height-body);
}
.dg-row-cell.dg-leak { color: var(--colour-text-secondary); }
.dg-row-cell.dg-leak strong { color: var(--signal-leak); font-weight: var(--font-weight-semibold); }
.dg-row-cell.dg-fix strong { color: var(--colour-teal-deep); font-weight: var(--font-weight-semibold); }

@media (max-width: 720px) {
  .dg-row { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-5) var(--space-5); }
  .dg-row-head { display: none; }
  .dg-row-cell::before {
    content: attr(data-label);
    display: block;
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
    color: var(--colour-text-tertiary);
    margin-bottom: 2px;
  }
}

/* ============================================
   3. STATUS / ENQUIRY TRAIL  (.dg-trail)
   A real job/enquiry moving through states. Tabular
   timestamps; a dropped step is flagged as the leak.
   ============================================ */

.dg-trail {
  position: relative;
  display: flex;
  flex-direction: column;
}

.dg-trail-item {
  position: relative;
  display: grid;
  grid-template-columns: 52px 22px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding-bottom: var(--space-5);
}
.dg-trail-item:last-child { padding-bottom: 0; }

/* rail */
.dg-trail-item::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: -2px;
  left: calc(52px + var(--space-3) + 10px);
  width: 2px;
  background: var(--colour-warm-line);
}
.dg-trail-item:last-child::before { display: none; }

.dg-trail-time {
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--colour-text-tertiary);
  text-align: right;
  padding-top: 3px;
  white-space: nowrap;
}

.dg-trail-dot {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin: 5px auto 0;
  border-radius: var(--radius-circle);
  background: var(--surface-primary);
  border: 2px solid var(--colour-text-tertiary);
}

.dg-trail-body { min-width: 0; }
.dg-trail-body strong {
  display: block;
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--colour-text-primary);
  line-height: var(--line-height-tight);
}
.dg-trail-body span {
  font-size: var(--font-size-caption);
  color: var(--colour-text-tertiary);
}

.dg-trail-item.is-done .dg-trail-dot {
  border-color: var(--signal-ok);
  background: var(--signal-ok);
}
.dg-trail-item.is-missed .dg-trail-dot {
  border-color: var(--signal-leak);
  background: var(--signal-leak-tint);
}

.dg-trail-flag {
  display: inline-block;
  margin-top: var(--space-1);
  padding: 2px 8px;
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  color: var(--signal-leak);
  background: var(--signal-leak-tint);
  border: 1px solid var(--signal-leak-line);
  border-radius: var(--radius-pill);
}

/* ============================================
   4. BEFORE / AFTER OPERATIONAL TRACE  (.dg-ba)
   "How it runs now" vs "With CPDS". Two grounded
   panels, the messy one warm-grey, the fixed one clean.
   ============================================ */

.dg-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

.dg-ba-col {
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  border: 1px solid var(--colour-warm-line);
}
.dg-ba-now { background: var(--colour-paper-mist); }
.dg-ba-cpds {
  background: var(--surface-primary);
  border-color: var(--colour-border);
  box-shadow: var(--shadow-card);
}

.dg-ba-tag {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}
.dg-ba-now .dg-ba-tag { color: var(--signal-leak); }
.dg-ba-cpds .dg-ba-tag { color: var(--colour-teal-deep); }

.dg-ba-list { display: flex; flex-direction: column; gap: var(--space-3); }
.dg-ba-list li {
  position: relative;
  padding-left: var(--space-7);
  font-size: var(--font-size-body-small);
  color: var(--colour-text-secondary);
  line-height: var(--line-height-body);
}
.dg-ba-list li::before {
  position: absolute;
  left: 0;
  top: -1px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-circle);
}
.dg-ba-now .dg-ba-list li::before {
  content: '\00d7'; /* × */
  color: var(--signal-leak);
  background: var(--signal-leak-tint);
}
.dg-ba-cpds .dg-ba-list li::before {
  content: '\2713'; /* ✓ */
  color: var(--colour-teal-deep);
  background: var(--signal-ok-tint);
}

@media (max-width: 720px) {
  .dg-ba { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ============================================
   5. COMPACT COMPARISON  (.dg-compare)
   Plain, honest comparison table. No tower cards.
   ============================================ */

.dg-compare {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--colour-warm-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dg-compare th,
.dg-compare td {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-body-small);
  border-bottom: 1px solid var(--colour-border-soft);
  vertical-align: top;
}
.dg-compare thead th {
  background: var(--colour-charcoal);
  color: var(--colour-text-inverse-strong);
  font-weight: var(--font-weight-semibold);
}
.dg-compare thead th:first-child {
  font-size: var(--font-size-eyebrow);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-inverse-muted);
}
.dg-compare tbody th {
  font-weight: var(--font-weight-semibold);
  color: var(--colour-text-primary);
  background: var(--colour-paper);
  width: 34%;
}
.dg-compare td { color: var(--colour-text-secondary); line-height: var(--line-height-body); }
.dg-compare tr:last-child th,
.dg-compare tr:last-child td { border-bottom: none; }
.dg-compare .dg-cell-ok { color: var(--colour-teal-deep); font-weight: var(--font-weight-semibold); }

/* ============================================
   6. FLAGS, NOTES, FIGURE FRAMES
   ============================================ */

.dg-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-pill);
  color: var(--signal-leak);
  background: var(--signal-leak-tint);
  border: 1px solid var(--signal-leak-line);
}
.dg-flag.is-ok {
  color: var(--colour-teal-deep);
  background: var(--signal-ok-tint);
  border-color: var(--signal-ok-line);
}

/* operator note — a grounded "service paper" annotation, used sparingly */
.dg-note {
  position: relative;
  background: var(--colour-paper);
  border: 1px solid var(--colour-warm-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-size: var(--font-size-body-small);
  color: var(--colour-text-secondary);
  line-height: var(--line-height-body);
  box-shadow: var(--shadow-subtle);
}
.dg-note-by {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colour-text-tertiary);
}

/* figure frame — present a diagnostic visual as an exhibit, not a screenshot */
.dg-figure {
  margin: 0;
  border: 1px solid var(--colour-warm-line);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--colour-paper);
}
.dg-figure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--colour-warm-line);
  background: var(--surface-primary);
}
.dg-figure-title {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-tertiary);
}
.dg-figure-body { padding: var(--space-7); }
.dg-figcaption {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--colour-warm-line);
  font-size: var(--font-size-caption);
  color: var(--colour-text-tertiary);
  background: var(--surface-primary);
}

/* dark figure variant — for hero/dark sections */
.dg-figure.is-dark {
  background: var(--surface-dark-elevated);
  border-color: var(--header-border);
}
.dg-figure.is-dark .dg-figure-head,
.dg-figure.is-dark .dg-figcaption {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--header-border);
}
.dg-figure.is-dark .dg-stage-name { color: var(--colour-text-inverse-strong); }
.dg-figure.is-dark .dg-stage-desc { color: var(--colour-text-inverse-muted); }
.dg-figure.is-dark .dg-stage-node { background: var(--surface-dark); border-color: rgba(255,255,255,0.18); color: var(--colour-text-inverse-muted); }
.dg-figure.is-dark .dg-stage::before { background: rgba(255,255,255,0.12); }
.dg-figure.is-dark .dg-stage.is-ok .dg-stage-node { border-color: var(--colour-teal-light); color: var(--colour-teal-light); background: rgba(110,193,228,0.12); }
.dg-figure.is-dark .dg-stage.is-leak .dg-stage-node { border-color: var(--signal-leak); color: var(--signal-leak); background: var(--signal-leak-tint); }

/* dark-figure status trail */
.dg-figure.is-dark .dg-trail-item::before { background: rgba(255, 255, 255, 0.12); }
.dg-figure.is-dark .dg-trail-dot { background: var(--surface-dark); border-color: var(--colour-text-inverse-faint); }
.dg-figure.is-dark .dg-trail-item.is-done .dg-trail-dot { border-color: var(--colour-teal-light); background: var(--colour-teal-light); }
.dg-figure.is-dark .dg-trail-item.is-missed .dg-trail-dot { border-color: var(--signal-leak); background: var(--signal-leak-tint); }
.dg-figure.is-dark .dg-trail-body strong { color: var(--colour-text-inverse-strong); }
.dg-figure.is-dark .dg-trail-body span { color: var(--colour-text-inverse-muted); }
.dg-figure.is-dark .dg-trail-time { color: var(--colour-text-inverse-faint); }

.dg-figure-meta {
  font-size: var(--font-size-caption);
  color: var(--colour-text-tertiary);
}
.dg-figure.is-dark .dg-figure-title,
.dg-figure.is-dark .dg-figure-meta,
.dg-figure.is-dark .dg-figcaption { color: var(--colour-text-inverse-muted); }