/* readiness-packet.css · the TERMINAL RESULT SURFACE.
   ============================================================
   This is the deliverable: one reviewed record flow, start to finish, by
   pointer. Gold is reserved for the deliverable, so the packet header, the
   gate badge, and the record tag carry the gold accent; everything structural
   stays cyan. Every color is a Datum token (halcyon.css) so theme.js flips
   light/dark for free. Text sits in its own panel, never over the charts.

   Legibility: AA on the ground color, readable measure, no horizontal
   overflow at 1280px or 375px (minmax(0,1fr) tracks, min-width:0 cols).

   MOTION CONTRACT: motion is OFF by default; panels reveal only inside
   @media (prefers-reduced-motion:no-preference) via .settle / .settle.in.
   ============================================================ */

/* the packet identity header: gold, because it IS the deliverable */
.packet-head {
  background:
    radial-gradient(120% 90% at 100% 0%, var(--gold-pale), transparent 55%),
    var(--surface);
  border: 1px solid var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
  min-width: 0;
}
.packet-head .packet-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.packet-head h2 {
  margin: var(--space-2) 0 0;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
}
.packet-head .packet-sub {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 60ch;
}

/* the identity rows, a clean key/value table that wraps on narrow widths */
.packet-id-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.packet-id-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
}
.packet-id-cell .k {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dimmer);
}
.packet-id-cell .v {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* the body: detail column + evidence/gate side, stacking under 880px */
.packet-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 880px) {
  .packet-body { grid-template-columns: minmax(0, 1fr); }
}
.packet-col { display: grid; gap: var(--space-4); min-width: 0; }

/* the human gate badge: the locked deliverable, in gold */
.gate-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--gold-pale);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
  min-width: 0;
}
.gate-badge .gate-mark {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--gold-deep);
}
.gate-badge .gate-text { min-width: 0; }
.gate-badge .gate-state {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-deep);
}
.gate-badge .gate-note {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.packet-foot { margin-top: var(--space-6); }

/* ============================================================
   ENRICH ADDITIONS. Breadcrumb trail, gate color legend, empty coach.
   All token-only (light/dark for free), AA contrast, no horizontal overflow
   at 375px (the trail wraps), reduced-motion safe (no motion of their own;
   they ride the shared .settle reveal). The tooltips use the live [data-tip]
   engine (tooltips.js → .ti-tip), reachable by hover, keyboard focus, and tap.
   ============================================================ */

/* the record-flow breadcrumb: source pointer → question → reviewed draft →
   result. A quiet trace line above the packet head, gold on the result step. */
.pk-trail {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}
.pk-trail-row {
  display: flex;
  flex-wrap: wrap;             /* wraps instead of overflowing at 375px */
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pk-trail-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-dim);
  min-width: 0;
}
/* the connector chevron between steps (skip before the first) */
.pk-trail-step + .pk-trail-step::before {
  content: "›";
  margin-right: var(--space-2);
  color: var(--text-dimmer);
  font-family: var(--mono);
}
.pk-trail-dot {
  width: 9px; height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--accent);
}
.pk-trail-label { overflow-wrap: anywhere; }
/* the terminal step is the deliverable, so it reads gold */
.pk-trail-step.is-result .pk-trail-dot {
  background: var(--gold);
  border-color: var(--gold);
}
.pk-trail-step.is-result .pk-trail-label {
  color: var(--gold-deep);
  font-weight: 600;
}

/* the gate color legend: a small swatch row under the gate note. Gold is the
   reviewer's gate, green (--ok) is linked evidence, matching the ring colors. */
.gate-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}
.gate-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.gate-legend-swatch {
  width: 11px; height: 11px;
  flex: 0 0 auto;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.gate-legend-swatch.is-gold   { background: var(--gold); border-color: var(--gold); }
.gate-legend-swatch.is-linked { background: var(--ok);   border-color: var(--ok); }

/* the empty coach uses the shared enrich.css .empty-coach; this only retints
   the icon disc to gold so it reads as "the packet" on the result surface. */
.pk-empty .empty-coach-ico {
  background: var(--gold-pale);
  border-color: var(--gold-soft);
  color: var(--gold-deep);
}

@media (prefers-reduced-motion: no-preference) {
  .settle {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .settle.in { opacity: 1; transform: none; }
}