/* One stylesheet for ACTIVITY items and change tags. The cockpit loads it
   directly and the embedded journey imports it, so the Activity list and the
   Ask ORA thread draw the same item identically. Tokens are local on purpose:
   the two documents do not share custom properties. */

.ora-activity {
  --ora-activity-accent: #6d35c6;
  --ora-activity-accent-ink: #54229f;
  --ora-activity-ink: #2e2436;
  --ora-activity-muted: #776c80;
  --ora-activity-quiet: #9a90a3;
  --ora-activity-line: #e6ddef;
  --ora-activity-ok: #237a57;
  --ora-activity-fail: #a3403a;
  --ora-activity-stopped: #a79db0;
  --ora-activity-late: #8a5a12;
  display: block;
  box-sizing: border-box;
  border: 1px solid var(--ora-activity-line);
  border-radius: 12px;
  background: #fff;
  color: var(--ora-activity-ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
}
.ora-activity + .ora-activity { margin-top: 8px; }
.ora-activity *,
.ora-activity *::before { box-sizing: border-box; }

.ora-activity-head {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  row-gap: 2px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.ora-activity-head::-webkit-details-marker { display: none; }
.ora-activity-head:focus-visible { outline: 2px solid rgba(109, 53, 198, .35); outline-offset: -2px; border-radius: 12px; }

.ora-activity-mark {
  grid-row: 1 / span 2;
  align-self: start;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border: 2px solid #d9cfe5;
  border-radius: 50%;
}
.ora-activity.is-running .ora-activity-mark {
  border-color: #e6dcf4;
  border-top-color: var(--ora-activity-accent);
  animation: ora-activity-spin .9s linear infinite;
}
/* Running assessment work: its glyph, a little larger than the ring and centred on it. */
.ora-activity-mark.has-glyph,
.ora-activity.is-running .ora-activity-mark.has-glyph {
  display: grid;
  width: 18px;
  height: 18px;
  margin: -1px -2px -3px;
  place-items: center;
  border: 0;
  border-radius: 0;
  animation: none;
}
.ora-activity.is-done .ora-activity-mark { border-color: var(--ora-activity-ok); background: var(--ora-activity-ok); box-shadow: inset 0 0 0 2px #fff; }
.ora-activity.is-failed .ora-activity-mark { border-color: var(--ora-activity-fail); background: var(--ora-activity-fail); box-shadow: inset 0 0 0 2px #fff; }
/* Waiting keeps the plain ring; stopped is grey. */
.ora-activity.is-stopped .ora-activity-mark { border-color: var(--ora-activity-stopped); background: var(--ora-activity-stopped); box-shadow: inset 0 0 0 2px #fff; }
.ora-activity.is-waiting .ora-activity-title strong,
.ora-activity.is-stopped .ora-activity-title strong { color: var(--ora-activity-muted); }

.ora-activity-title { display: flex; min-width: 0; align-items: baseline; gap: 6px; }
.ora-activity-title strong { overflow: hidden; color: var(--ora-activity-ink); font-size: 11px; font-weight: 800; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ora-activity-time { flex: none; color: var(--ora-activity-muted); font-size: 9px; font-weight: 650; }
.ora-activity-time::before { content: "·"; margin-right: 6px; }
.ora-activity-subtitle { grid-column: 2; overflow: hidden; color: var(--ora-activity-muted); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.ora-activity[open] .ora-activity-subtitle { white-space: normal; }
.ora-activity-note { grid-column: 2; color: var(--ora-activity-quiet); font-size: 9px; font-weight: 650; line-height: 1.4; }
.ora-activity-note.is-late { color: var(--ora-activity-late); }

.ora-activity-body { display: grid; gap: 9px; padding: 0 12px 12px 35px; }
.ora-activity-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ora-activity-step { position: relative; padding-left: 16px; color: var(--ora-activity-quiet); font-size: 9.5px; line-height: 1.4; }
.ora-activity-step::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1.5px solid #cfc4db;
  border-radius: 50%;
}
.ora-activity-step.is-done { color: var(--ora-activity-ink); }
.ora-activity-step.is-done::before { border-color: var(--ora-activity-ok); background: var(--ora-activity-ok); }
.ora-activity-step.is-running { color: var(--ora-activity-accent-ink); font-weight: 700; }
.ora-activity-step.is-running::before { border-color: #e1d4f3; border-top-color: var(--ora-activity-accent); animation: ora-activity-spin .9s linear infinite; }
.ora-activity-step.is-failed { color: var(--ora-activity-fail); font-weight: 700; }
.ora-activity-step.is-failed::before { border-color: var(--ora-activity-fail); background: var(--ora-activity-fail); }
.ora-activity-step small { display: block; color: var(--ora-activity-muted); font-size: 9px; font-weight: 500; }

.ora-activity-areas { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ora-activity-area { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--ora-activity-line); border-radius: 999px; padding: 3px 8px; color: var(--ora-activity-ink); font-size: 9px; font-weight: 700; }
.ora-activity-area em { color: var(--ora-activity-muted); font-style: normal; font-weight: 600; }
.ora-activity-area.is-changed em { color: var(--ora-activity-accent-ink); }
.ora-activity-area.is-failed em { color: var(--ora-activity-fail); }

.ora-activity-message { margin: 0; border-radius: 8px; background: #fff1f0; color: var(--ora-activity-fail); padding: 7px 9px; font-size: 9.5px; line-height: 1.45; }
.ora-activity-result { margin: 0; color: var(--ora-activity-ink); font-size: 9.5px; line-height: 1.45; }
.ora-activity-actions { display: flex; gap: 6px; }
.ora-activity-open {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid #d9c9ed;
  border-radius: 8px;
  background: #fff;
  color: var(--ora-activity-accent-ink);
  padding: 0 9px;
  font: 800 9px/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.ora-activity-open:hover,
.ora-activity-open:focus-visible { border-color: #8b43dd; background: #f8f2ff; outline: none; }
.ora-activity-open.is-stop { border-color: #e6cfcc; color: var(--ora-activity-fail); }
.ora-activity-open.is-stop:hover,
.ora-activity-open.is-stop:focus-visible { border-color: var(--ora-activity-fail); background: #fff6f5; }
.ora-activity-confirm { display: grid; gap: 7px; border-radius: 8px; background: #faf7fc; padding: 8px 9px; }
.ora-activity-confirm p { margin: 0; color: var(--ora-activity-ink); font-size: 9.5px; line-height: 1.45; }
.ora-activity.is-stopped .ora-activity-message { background: #f4f2f6; color: var(--ora-activity-muted); }

@keyframes ora-activity-spin { to { transform: rotate(360deg); } }

/* Change tags: the Ask ORA result list and the badges on changed cards use the
   same four tags. */
.ora-change-tag {
  display: inline-flex;
  flex: none;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .02em;
  line-height: 1.4;
  white-space: nowrap;
}
.ora-change-tag.is-new { background: #e4f3ec; color: #1f6d4c; }
.ora-change-tag.is-revised { background: #efe6fb; color: #5b22a6; }
.ora-change-tag.is-removed { background: #fbeceb; color: #9d3b35; }
.ora-change-tag.is-not-shown { background: #f1eff4; color: #6d6377; }

@media (prefers-reduced-motion: reduce) {
  .ora-activity.is-running .ora-activity-mark,
  .ora-activity-step.is-running::before { animation: none; }
}
.ora-change-tag.is-stronger-evidence { background: #e4f3ec; color: #1f6d4c; }
.ora-change-tag.is-weaker-evidence { background: #fdf3e2; color: #8a5a12; }