/* Rules only the Operations offer can match, under the `sl-offer-operations`
   class this page adds beside `.sl` on <main>. Ported from the app's own
   page-local sheet (web-v3/src/pages/sales-operations/operations.css); the kit
   in css/sales-landing.css stays untouched, because every other offer page
   loads it and none of them can use what is below.

   All of it serves four pictures the kit has no block for: the flow on the
   canvas, the run halted at the review gate, the trace it left behind, and the
   analytics console. A second offer that needs any of them moves it into the
   kit.

   The one rule NOT ported is the single-plan grid: css/sales-landing.css
   already centres a lone card through `.sl-plans:has(.sl-plan:only-child)`. */

/* ---------- the flow on the canvas ---------- */

.sl-offer-operations .sl-flow-grid {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

.sl-offer-operations .sl-flow-palette {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 8px;
  border: 1px solid #e6e6ec;
  border-radius: 12px;
  background: #fff;
}

.sl-offer-operations .sl-flow-palette b {
  margin-bottom: 2px;
  color: #8a8899;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sl-offer-operations .sl-flow-group {
  padding: 4px 7px;
  border-radius: 7px;
  background: #f4f4f8;
  color: #4c4a5c;
  font-size: 10px;
  font-weight: 600;
}

.sl-offer-operations .sl-flow-rail {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sl-offer-operations .sl-flow-start {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px dashed var(--line-2);
  border-radius: 99px;
  color: var(--text-2);
  font-size: 10px;
}

.sl-offer-operations .sl-flow-start b {
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
}

.sl-offer-operations .sl-flow-node {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid #e6e6ec;
  border-radius: 12px;
  background: #fff;
}

/* The arrow between two steps. It grows out of the node above, so a step that
   has not appeared yet has no line reaching it.

   `sl-grow` is the KIT's keyframe. Redefining it here would have been a global
   override, because keyframes ignore the `.sl-offer-operations` scope: the
   kit's own bars and another offer's page both animate on that name. */
.sl-offer-operations .sl-flow-link {
  position: absolute;
  top: -9px;
  left: 22px;
  width: 1.5px;
  height: 9px;
  background: var(--line-2);
  transform-origin: top;
  animation: sl-grow 0.3s var(--ease-out) var(--d, 0ms) both;
}

.sl-offer-operations .sl-flow-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
}

.sl-offer-operations .sl-flow-node.is-cyan .sl-flow-icon {
  background: var(--cyan-tint);
  color: var(--cyan-deep);
}

.sl-offer-operations .sl-flow-node.is-violet .sl-flow-icon {
  background: var(--violet-tint);
  color: #5a48cf;
}

.sl-offer-operations .sl-flow-node.is-orange .sl-flow-icon {
  background: var(--orange-tint);
  color: #b45c0c;
}

.sl-offer-operations .sl-flow-node.is-green .sl-flow-icon {
  background: var(--green-tint);
  color: #0f7a50;
}

/* The gate is the argument of the page, so it is the one node drawn as a
   stop: a warm ring instead of the hairline every other step wears. */
.sl-offer-operations .sl-flow-node.is-gate {
  border-color: rgba(246, 139, 53, 0.55);
  box-shadow: 0 0 0 3px var(--orange-tint);
}

.sl-offer-operations .sl-flow-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sl-offer-operations .sl-flow-text b {
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
}

.sl-offer-operations .sl-flow-type {
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- the run, halted ---------- */

.sl-offer-operations .sl-run-steps {
  display: grid;
  gap: 6px;
}

.sl-offer-operations .sl-run-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid #e6e6ec;
  border-radius: 11px;
  background: #fff;
}

/* The halted step is the only one that carries weight: everything above it is
   finished and everything below has not started. */
.sl-offer-operations .sl-run-step.is-held {
  border-color: rgba(246, 139, 53, 0.55);
  box-shadow: 0 0 0 3px var(--orange-tint);
}

.sl-offer-operations .sl-run-step.is-idle {
  opacity: 0.55;
}

.sl-offer-operations .sl-run-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sl-offer-operations .sl-run-text b {
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
}

.sl-offer-operations .sl-run-text span {
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Two more chips beside the kit's three. They are here and not in the kit
   because nothing else on the site can use them yet: the kit's chips all mean
   progress, and these two mean "stopped" and "never reached". */
.sl-offer-operations .sl-state.is-held {
  background: var(--orange-tint);
  color: #b45c0c;
  animation: sl-pop 0.45s var(--ease-out) var(--d, 0ms) both;
}

.sl-offer-operations .sl-state.is-idle {
  background: #f1f1f5;
  color: #6e6c7e;
  animation: sl-pop 0.45s var(--ease-out) var(--d, 0ms) both;
}

.sl-offer-operations .sl-review {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid rgba(246, 139, 53, 0.4);
  border-radius: 13px;
  background: #fffaf4;
}

.sl-offer-operations .sl-review-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sl-offer-operations .sl-review-body b {
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
}

.sl-offer-operations .sl-review-body span {
  color: var(--text);
  font-size: 10.5px;
  line-height: 1.4;
}

.sl-offer-operations .sl-review-actions {
  display: flex;
  grid-column: 2;
  gap: 6px;
  margin-top: 4px;
}

.sl-offer-operations .sl-review-btn {
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
}

.sl-offer-operations .sl-review-btn.is-go {
  border-color: transparent;
  background: var(--ink);
  color: #fff;
}

/* ---------- the trace it left ---------- */

.sl-offer-operations .sl-trail-steps {
  display: grid;
  gap: 7px;
}

.sl-offer-operations .sl-trail-step {
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid #e6e6ec;
  border-radius: 11px;
  background: #fff;
}

.sl-offer-operations .sl-trail-step.is-failed {
  border-color: rgba(214, 69, 69, 0.4);
}

.sl-offer-operations .sl-trail-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sl-offer-operations .sl-trail-head b {
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
}

.sl-offer-operations .sl-trail-type {
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sl-offer-operations .sl-trail-io {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
}

.sl-offer-operations .sl-trail-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  padding: 3px 8px;
  border-radius: 7px;
  background: #f4f4f8;
  color: var(--ink);
  font-size: 10px;
  white-space: nowrap;
}

.sl-offer-operations .sl-trail-pill i {
  color: var(--text-2);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sl-offer-operations .sl-trail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 10px;
}

.sl-offer-operations .sl-trail-meta em {
  font-style: normal;
}

.sl-offer-operations .sl-trail-meta em::before {
  margin-right: 6px;
  content: "·";
}

.sl-offer-operations .sl-trail-error {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 6px 9px;
  border-radius: 8px;
  background: #fdeeee;
  color: #a33232;
  font-size: 10px;
  animation: sl-pop 0.45s var(--ease-out) var(--d, 0ms) both;
}

.sl-offer-operations .sl-trail-error b {
  color: #7d2626;
  font-weight: 700;
  text-decoration: underline;
}

/* ---------- the month, in the analytics console ---------- */

.sl-offer-operations .sl-metrics-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sl-offer-operations .sl-metrics-tab {
  padding: 4px 9px;
  border-radius: 99px;
  background: #f4f4f8;
  color: #6e6c7e;
  font-size: 10px;
  font-weight: 600;
}

.sl-offer-operations .sl-metrics-tab.is-on {
  background: var(--ink);
  color: #fff;
}

.sl-offer-operations .sl-metrics-card {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 11px 13px;
  border: 1px solid #e6e6ec;
  border-radius: 13px;
  background: #fff;
}

.sl-offer-operations .sl-metrics-card b {
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
}

.sl-offer-operations .sl-metrics-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 92px;
}

.sl-offer-operations .sl-metrics-bars i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #3cc8f2, var(--cyan-deep));
  transform-origin: bottom;
  animation: sl-grow 0.4s var(--ease-out) var(--d, 0ms) both;
}

/* Reduced motion: the kit collapses its own timelines to the final frame, and
   the four animations declared above are this page's own, so they need the
   same answer here. */
@media (prefers-reduced-motion: reduce) {
  .sl-offer-operations .sl-flow-link,
  .sl-offer-operations .sl-state.is-held,
  .sl-offer-operations .sl-state.is-idle,
  .sl-offer-operations .sl-trail-error,
  .sl-offer-operations .sl-metrics-bars i {
    animation: none !important;
  }
}

/* ---------- the halted run, fitted to the site's shorter window ----------

   Everything above this line is the app's page sheet, ported value for value
   so the two stay diffable. This block is the one place the site deviates,
   and it exists because the site's replica window is shorter than the app's:
   css/sales-landing.css adds the illustration caption as a THIRD grid row
   inside the same fixed `height: clamp(400px, 38vw, 470px)`, so the pane loses
   23px that the app's scenes were drawn against.

   Measured in the browser at 1920px, in br and es: five of this offer's six
   scenes still fit the pane exactly, and the halted run — the tallest, with
   four steps, the reviewer's card and the closing line — ran 43px over. What
   fell off the bottom was the toast, "Nada sai daqui antes da decisão de
   alguém.", which is the sentence the whole page argues.

   The values below give those 43px back out of the scene's own rhythm and
   touch nothing else: no other scene, no other offer, no shared rule. The
   review step still wraps its label onto a second line, so the block that
   stops the run stays the tallest one on screen.

   NOTE FOR THE APP: the same scene overflows in web-v3 too, by about 20px,
   for the same reason minus the caption. This sheet cannot fix that; the app's
   own operations.css needs the equivalent change. */

.sl-offer-operations .sl-run {
  gap: 6px;
}

.sl-offer-operations .sl-run .sl-run-steps {
  gap: 4px;
}

.sl-offer-operations .sl-run .sl-run-step {
  padding: 5px 11px;
}

.sl-offer-operations .sl-run .sl-review {
  padding: 8px 12px;
}

.sl-offer-operations .sl-run .sl-review-body span {
  line-height: 1.35;
}

.sl-offer-operations .sl-run .sl-review-actions {
  margin-top: 2px;
}

.sl-offer-operations .sl-run .sl-toast {
  padding: 7px 13px;
}