/* company.css · the SHARED VIEW for the Halcyon candidate branch.
   ============================================================
   Who sees what. Each role gets a lane that names the document slice it
   reads and the slice it never sees. The same reviewed record flow, framed
   for the person reading it. Every color is a Datum token (halcyon.css) so
   theme.js flips light/dark for free. Text sits in its own panel.

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

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

.share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.role-lane {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.role-lane h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
}
.role-lane .role-tag {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}
.role-sees,
.role-hidden {
  margin: var(--space-3) 0 0;
}
.role-sees .lbl,
.role-hidden .lbl {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.role-sees .lbl { color: var(--ok); }
.role-hidden .lbl { color: var(--gold); }
.role-sees p,
.role-hidden p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* the result-packet lane is the deliverable, framed in gold */
.role-lane.is-packet { border-left-color: var(--gold); }
.role-lane.is-packet .role-tag { color: var(--gold); }

.share-foot { margin-top: var(--space-2); }

/* teach-back card spacing */
.teachback-card { margin-top: var(--space-2); }

@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; }
  .share-grid .role-lane.settle.in:nth-child(2) { transition-delay: 0.06s; }
  .share-grid .role-lane.settle.in:nth-child(3) { transition-delay: 0.12s; }
  .share-grid .role-lane.settle.in:nth-child(4) { transition-delay: 0.18s; }
  .share-grid .role-lane.settle.in:nth-child(5) { transition-delay: 0.24s; }
  .role-lane:hover { border-color: var(--border-accent); transform: translateY(-2px); }
}