/* ============================================================================
   HAWK orchestration canvas — exact skin
   ----------------------------------------------------------------------------
   Lifted from the product's own stylesheet
   (HawkEtl.App/wwwroot/assets/css/orchestration-builder.css, the `.orchb-graph`
   scope) plus the four layout rules the run graph takes from
   orchestration.css. Nothing here is re-designed for the marketing site: the
   96x96 square, the 22px dot grid, the 1.8px edges and the state palette are
   the ones the application draws.

   Everything is scoped under `.orchb-graph`, which only ever sits on the
   pipeline canvas, so the page's own `.or-*` styling is untouched.
   ========================================================================== */

/* The tokens reach one step outside the canvas: the inspector next to it shows
   the same type badge and the same state pill, and those two have to be the
   product's, not a second set drawn to look like them. Only custom properties
   are declared here — the studio's own type and colour are untouched. */
.or-studio,
.orsch-inspector,
.orchb-graph {
  /* --- palette --- */
  --orchb-acc: #5e5ce6;
  --orchb-acc-hover: #4b49c8;
  --orchb-bg: #f5f5f7;
  --orchb-surface: #fff;

  --orchb-ink: #1d1d1f;
  --orchb-ink-2: #3a3a3c;
  --orchb-ink-3: #6e6e73;
  --orchb-ink-4: #86868b;
  --orchb-disabled: #c7c7cc;

  --orchb-danger: #ff3b30;
  --orchb-warning: #ff9500;
  --orchb-success: #248a3d;

  --orchb-edge: #b8b8c0;
  --orchb-edge-group: #8e8e93;
  --orchb-port: #b0b0b8;

  /* Hairlines and washes are alpha-on-white throughout, never flat greys —
     they have to survive sitting on both the #fff panels and the #f5f5f7
     canvas. */
  --orchb-line: rgba(0, 0, 0, .08);
  --orchb-line-strong: rgba(0, 0, 0, .12);
  --orchb-line-soft: rgba(0, 0, 0, .06);
  --orchb-fill: rgba(0, 0, 0, .05);
  --orchb-fill-hover: rgba(0, 0, 0, .09);
  --orchb-fill-subtle: rgba(0, 0, 0, .045);

  /* --- typography --- */
  --orchb-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  --orchb-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- geometry --- */
  --orchb-r-seg: 6px;
  --orchb-r-badge: 6px;
  --orchb-r-control: 8px;
  --orchb-r-pill: 9px;
  --orchb-r-node: 10px;
  --orchb-r-menu: 11px;
  --orchb-r-chip: 12px;
  --orchb-r-crumb: 7px;
  --orchb-r-group: 14px;

  --orchb-h-weekday: 26px;
  --orchb-h-control: 30px;

  --orchb-danger-ink: #c62b22;

  --orchb-row-pad: 6px 8px;

  --orchb-grid-size: 22px;
  --orchb-grid-img: radial-gradient(rgba(0, 0, 0, .10) 1px, transparent 1px);
}

.orchb-graph {
  font-family: var(--orchb-font);
  font-size: 13px;
  color: var(--orchb-ink);
  -webkit-font-smoothing: antialiased;

  position: relative;
  overflow: hidden;
  background-color: var(--orchb-bg);
  background-image: var(--orchb-grid-img);
  background-size: var(--orchb-grid-size) var(--orchb-grid-size);
}

.orchb-graph *,
.orchb-graph *::before,
.orchb-graph *::after {
  box-sizing: border-box;
}

.orchb-graph button {
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}

/* --- canvas frame: the four rules the run graph takes from orchestration.css */

.orchb-graph .orch-graph-canvas-inner {
  position: absolute;
  inset: 0;
  overflow: auto;
}

.orchb-graph .orch-graph-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

.orchb-graph .orch-graph-surface {
  position: relative;
  top: 0;
  left: 0;
}

.orchb-graph .orch-graph-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.orchb-graph .orch-node-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* --- node ------------------------------------------------------------------
   The shared stylesheet sizes this wrap for the old 250px card. */

.orchb-graph .orch-node-wrap {
  position: absolute;
  width: 96px;
  display: block;
  gap: 0;
  pointer-events: auto;
}

/* An open node has to outrank its neighbours, or the flyout slides under the
   square in the next column. */
.orchb-graph .orch-node-wrap.is-expanded {
  z-index: 6;
}

.orchb-graph .orchg-node {
  --orchg-state: var(--orchb-disabled);
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px 6px;
  text-align: center;
  overflow: hidden;
  background: var(--orchb-surface);
  border: 1px solid var(--orchb-line);
  border-radius: var(--orchb-r-node);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  cursor: pointer;
  user-select: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}

.orchb-graph .orchg-node:hover {
  border-color: var(--orchb-line-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}

.orchb-graph .orchg-node.is-selected {
  border-color: var(--orchb-acc);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--orchb-acc) 18%, transparent);
}

.orchb-graph .orchg-node.is-muted {
  opacity: .5;
}

.orchb-graph .orchg-node__state {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--orchg-state);
}

.orchb-graph .orchg-node__name {
  width: 100%;
  font: 600 10.5px var(--orchb-mono);
  line-height: 1.25;
  color: var(--orchb-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.orchb-graph .orchg-node__dur {
  font: 500 9.5px var(--orchb-mono);
  color: var(--orchb-ink-4);
  line-height: 1;
}

/* --- state palette: bar, and the ring a failure earns --- */

.orchb-graph .orchg-node.state-success { --orchg-state: var(--orchb-success); }
.orchb-graph .orchg-node.state-running { --orchg-state: var(--orchb-acc); }
.orchb-graph .orchg-node.state-failed,
.orchb-graph .orchg-node.state-error { --orchg-state: var(--orchb-danger); }
.orchb-graph .orchg-node.state-warning,
.orchb-graph .orchg-node.state-upstream-failed,
.orchb-graph .orchg-node.state-blocked { --orchg-state: var(--orchb-warning); }
.orchb-graph .orchg-node.state-queued,
.orchb-graph .orchg-node.state-retrying { --orchg-state: #0a84c2; }
.orchb-graph .orchg-node.state-paused,
.orchb-graph .orchg-node.state-scheduled { --orchg-state: var(--orchb-ink-4); }
.orchb-graph .orchg-node.state-cancelled,
.orchb-graph .orchg-node.state-skipped { --orchg-state: var(--orchb-disabled); }

.orchb-graph .orchg-node.state-failed,
.orchb-graph .orchg-node.state-error {
  border-color: color-mix(in oklab, var(--orchb-danger) 55%, var(--orchb-line));
}

/* The one animation on the canvas: it marks the single node that is doing
   something right now, which is the question this page exists to answer. */
.orchb-graph .orchg-node.state-running {
  border-color: color-mix(in oklab, var(--orchb-acc) 45%, var(--orchb-line));
  animation: orchg-node-run 1.8s ease-in-out infinite;
}

@keyframes orchg-node-run {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--orchb-acc) 22%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--orchb-acc) 14%, transparent); }
}

/* --- expand affordance --- */

.orchb-graph .orchg-node__expand {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--orchb-r-pill);
  background: color-mix(in oklab, var(--orchb-acc) 10%, transparent);
  color: var(--orchb-acc);
  font: 700 8.5px var(--orchb-mono);
  cursor: pointer;
}

.orchb-graph .orchg-node__expand svg {
  width: 7px;
  height: 7px;
  fill: currentColor;
  transition: transform .14s ease;
}

.orchb-graph .orchg-node__expand.is-open svg {
  transform: rotate(180deg);
}

.orchb-graph .orchg-node__expand:hover {
  background: color-mix(in oklab, var(--orchb-acc) 18%, transparent);
}

/* --- ports --------------------------------------------------------------
   Vertically centred on the 96px square: (96 - 2*1px border - 10px) / 2 = 42,
   +1 for the border the offset is measured from. */

.orchb-graph .orchb-port {
  position: absolute;
  top: 43px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orchb-disabled);
  border: 2px solid #fff;
}

.orchb-graph .orchb-port--in { left: -5px; }
.orchb-graph .orchb-port--out { right: -5px; }

/* --- type badge ---------------------------------------------------------- */

.or-studio .orchb-badge {
  flex: none;
  min-width: 26px;
  height: 22px;
  padding: 0 3px;
  border-radius: var(--orchb-r-badge);
  background: var(--orchb-type-color, var(--orchb-ink-4));
  color: #fff;
  font: 700 10px var(--orchb-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Routines and materialized views are objects, not abbreviations. Their mark is
   a softly lit enamel tile: distinct glyphs at a glance, with enough depth to
   stay legible on both the white palette and the tinted canvas. */
.or-studio .orchb-badge.orchb-badge--icon {
  position: relative;
  min-width: 28px;
  height: 26px;
  padding: 0;
  overflow: hidden;
  color: var(--orchb-type-color, var(--orchb-ink-4));
  border: 1px solid color-mix(in srgb, var(--orchb-type-color, var(--orchb-ink-4)) 34%, #fff);
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 255, 255, .98) 0 16%, transparent 38%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--orchb-type-color, var(--orchb-ink-4)) 8%, #fff) 0%,
      color-mix(in srgb, var(--orchb-type-color, var(--orchb-ink-4)) 17%, #fff) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 3px 8px color-mix(in srgb, var(--orchb-type-color, var(--orchb-ink-4)) 18%, transparent);
}

.or-studio .orchb-badge.orchb-badge--icon::after {
  content: "";
  position: absolute;
  inset: auto 4px 3px;
  height: 1px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--orchb-type-color, var(--orchb-ink-4)) 34%, transparent);
  opacity: .62;
}

.or-studio .orchb-badge.orchb-badge--icon svg {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* --- group box: dashed backdrop, drawn behind edges and nodes ------------- */

.orchb-graph .orchb-group {
  position: absolute;
  z-index: 1;
  background: rgba(0, 0, 0, .022);
  border: 1px dashed var(--orchb-edge-group);
  border-radius: var(--orchb-r-group);
  pointer-events: none;
}

.orchb-graph .orchb-group.state-running {
  border-color: color-mix(in oklab, var(--orchb-acc) 55%, var(--orchb-edge-group));
  background: color-mix(in oklab, var(--orchb-acc) 4%, transparent);
}

.orchb-graph .orchb-group.state-failed {
  border-color: color-mix(in oklab, var(--orchb-danger) 55%, var(--orchb-edge-group));
  background: color-mix(in oklab, var(--orchb-danger) 4%, transparent);
}

.orchb-graph .orchb-group.state-success {
  border-color: color-mix(in oklab, var(--orchb-success) 45%, var(--orchb-edge-group));
}

.orchb-graph .orchb-group__head {
  pointer-events: auto;
  position: absolute;
  left: 10px;
  top: 7px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.orchb-graph .orchb-group__name {
  font: 600 12px var(--orchb-font);
  color: var(--orchb-ink-2);
}

/* The group's own colour survives as the count pill's fill — the border stays
   the neutral hairline the design system asks for. */
.orchb-graph .orchb-group__count {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--orchb-group-color, color-mix(in oklab, var(--orchb-acc) 70%, #889));
  border-radius: var(--orchb-r-pill);
  padding: 1px 7px;
}

/* --- edges --------------------------------------------------------------- */

.orchb-graph .orchb-edge__line {
  pointer-events: none;
  fill: none;
  stroke: var(--orchb-edge);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.orchb-graph .orchb-edge__line.state-pending { stroke: var(--orchb-edge); }
.orchb-graph .orchb-edge__line.state-success { stroke: color-mix(in oklab, var(--orchb-success) 70%, var(--orchb-edge)); }
.orchb-graph .orchb-edge__line.state-warning { stroke: color-mix(in oklab, var(--orchb-warning) 70%, var(--orchb-edge)); }

.orchb-graph .orchb-edge__line.state-failed {
  stroke: var(--orchb-danger);
  stroke-width: 2.2;
}

/* Dashes only where they mean something: this edge is being traversed. */
.orchb-graph .orchb-edge__line.state-running {
  stroke: var(--orchb-acc);
  stroke-width: 2.2;
  stroke-dasharray: 5 5;
  animation: orchg-edge-flow 1.2s linear infinite;
}

@keyframes orchg-edge-flow {
  to { stroke-dashoffset: -20; }
}

/* --- flyout: the table drill-down ---------------------------------------- */

.orchb-graph .orchg-flyout {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 264px;
  max-height: 340px;
  overflow: auto;
  padding: 8px;
  background: var(--orchb-surface);
  border: 1px solid var(--orchb-line);
  border-radius: var(--orchb-r-menu);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  text-align: left;
  cursor: default;
}

.orchb-graph .orchg-flyout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--orchb-ink-2);
}

.orchb-graph .orchg-flyout__kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.orchb-graph .orchg-flyout__flow {
  margin-top: 4px;
  font: 500 10.5px var(--orchb-mono);
  color: var(--orchb-ink-3);
  overflow-wrap: anywhere;
}

.orchb-graph .orchg-flyout__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--orchb-line-soft);
  font-size: 10.5px;
  color: var(--orchb-ink-4);
}

.orchb-graph .orchg-flyout__rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

/* One table of the job this task runs. Same row shape as the palette's leaf
   rows in the builder — dot, name, nothing else. */
.orchb-graph .orchg-row {
  --orchg-state: var(--orchb-disabled);
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: var(--orchb-row-pad);
  border: 0;
  border-radius: var(--orchb-r-seg);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.orchb-graph .orchg-row:hover {
  background: var(--orchb-fill-subtle);
}

.orchb-graph .orchg-row__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orchg-state);
}

.orchb-graph .orchg-row__name {
  min-width: 0;
  font: 500 11px var(--orchb-mono);
  color: var(--orchb-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orchb-graph .orchg-row.state-success { --orchg-state: var(--orchb-success); }
.orchb-graph .orchg-row.state-running { --orchg-state: var(--orchb-acc); }
.orchb-graph .orchg-row.state-failed { --orchg-state: var(--orchb-danger); }
.orchb-graph .orchg-row.state-warning { --orchg-state: var(--orchb-warning); }

/* --- graph toolbar: the run view's zoom / fit cluster --------------------- */

.orchb-graph .op-graph-toolbar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  gap: 4px;
  background: var(--orchb-surface);
  border: 1px solid var(--orchb-line);
  border-radius: 6px;
  padding: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  z-index: 5;
}

.orchb-graph .op-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 5px;
  color: var(--orchb-ink-3);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

.orchb-graph .op-icon-btn:hover {
  background: var(--orchb-fill);
  color: var(--orchb-ink);
}

.orchb-graph .op-icon-btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* --- status pill: the run view's state chip ------------------------------ */

.orchb-graph .orch-pill,
.or-studio .orch-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--orchb-r-pill, 9px);
  font: 600 10.5px -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  background: rgba(0, 0, 0, .05);
  color: #6e6e73;
}

.or-studio .orch-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.or-studio .orch-pill.state-success { background: rgba(36, 138, 61, .12); color: #1c6f31; }
.or-studio .orch-pill.state-running { background: rgba(94, 92, 230, .12); color: #4b49c8; }
.or-studio .orch-pill.state-failed { background: rgba(255, 59, 48, .12); color: #c62b22; }
.or-studio .orch-pill.state-queued { background: rgba(10, 132, 194, .12); color: #0a6a9c; }
.or-studio .orch-pill.state-paused { background: rgba(0, 0, 0, .05); color: #6e6e73; }

@media (prefers-reduced-motion: reduce) {
  .orchb-graph .orchg-node.state-running,
  .orchb-graph .orchb-edge__line.state-running {
    animation: none;
  }
}

/* ============================================================================
   Schedule editor — the second surface this sheet carries.
   ----------------------------------------------------------------------------
   Same provenance as the canvas above: these are the controls the pipeline
   inspector draws under "Zamanlama" (Full.razor's schedule section) — the
   segmented frequency switch, the fields, the weekday picker and the tinted
   box that reads the cron back as a sentence with the upcoming fire times.
   Scoped to `.orsch-inspector` so nothing leaks onto the marketing page.
   ========================================================================== */

.orsch-inspector {
  font-family: var(--orchb-font);
  font-size: 13px;
  color: var(--orchb-ink);
  -webkit-font-smoothing: antialiased;
}

.orsch-inspector *,
.orsch-inspector *::before,
.orsch-inspector *::after {
  box-sizing: border-box;
}

/* Rows appear and disappear with the chosen frequency, and they are toggled by
   the `hidden` property. The layout rules below set `display` on those same
   elements, which outranks the user-agent's `[hidden] { display: none }` — so
   the hiding has to be restated here, once, with the weight to win. */
.orsch-inspector [hidden] {
  display: none !important;
}

.orsch-inspector .orchb-sec-hd {
  font: 600 10px var(--orchb-font);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orchb-ink-4);
  margin-bottom: 9px;
}

.orsch-inspector .orchb-seg {
  display: flex;
  background: var(--orchb-fill);
  border-radius: var(--orchb-r-control);
  padding: 2px;
  gap: 2px;
  flex: none;
}

.orsch-inspector .orchb-seg__item {
  border: 0;
  border-radius: var(--orchb-r-seg);
  padding: 4px 11px;
  font: 600 11.5px var(--orchb-font);
  cursor: pointer;
  transition: all .12s;
  background: transparent;
  color: var(--orchb-ink-3);
}

.orsch-inspector .orchb-seg__item.is-active {
  background: #fff;
  color: var(--orchb-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.orsch-inspector .orchb-seg--fill {
  width: 100%;
}

.orsch-inspector .orchb-seg--fill .orchb-seg__item {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
}

/* Labels are localised, so any of them can be the long one. Let the text
   ellipsize instead of forcing its item wider than its equal share. */
.orsch-inspector .orchb-seg--fill .orchb-seg__item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Five frequency options do not fit one inspector row. Grid so the two rows
   keep identical column widths — flex-wrap would leave the second row's two
   items stretched to half width each. */
.orsch-inspector .orchb-seg--grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.orsch-inspector .orchb-seg--grid3 .orchb-seg__item {
  flex: none;
}

/* The product draws these with FontAwesome; the site has no webfont, so the
   same glyphs travel as inline outlines and pick up the button's colour. */
.orsch-inspector .orchb-seg__item > svg {
  width: 11px;
  height: 11px;
  flex: none;
  fill: currentColor;
}

.orsch-inspector .orchb-field {
  display: block;
  margin-bottom: 10px;
}

.orsch-inspector .orchb-field__label {
  display: block;
  font-size: 10.5px;
  color: var(--orchb-ink-3);
  margin-bottom: 4px;
  font-weight: 500;
}

.orsch-inspector .orchb-input {
  width: 100%;
  height: var(--orchb-h-control);
  border: 1px solid var(--orchb-line-strong);
  border-radius: var(--orchb-r-control);
  padding: 0 9px;
  font-family: var(--orchb-font);
  font-size: 12px;
  background: #fff;
  color: var(--orchb-ink);
  transition: border-color .12s, box-shadow .12s;
}

.orsch-inspector .orchb-input:focus-visible {
  outline: none;
  border-color: var(--orchb-acc);
  box-shadow: 0 0 0 3px rgba(94, 92, 230, .18);
}

.orsch-inspector .orchb-input--mono {
  font-family: var(--orchb-mono);
  font-size: 11.5px;
}

.orsch-inspector .orchb-input:disabled {
  color: var(--orchb-ink-2);
  -webkit-text-fill-color: var(--orchb-ink-2);
  opacity: 1;
}

.orsch-inspector .orchb-insp__row {
  display: flex;
  gap: 8px;
}

.orsch-inspector .orchb-insp__row > * {
  flex: 1;
  min-width: 0;
}

/* Schedule builder weekday picker. */
.orsch-inspector .orchb-weekdays {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.orsch-inspector .orchb-weekday {
  height: var(--orchb-h-weekday);
  min-width: var(--orchb-h-weekday);
  padding: 0 6px;
  border: 1px solid var(--orchb-line-strong);
  background: #fff;
  border-radius: var(--orchb-r-crumb);
  font: 600 11px var(--orchb-font);
  color: var(--orchb-ink-3);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}

.orsch-inspector .orchb-weekday.is-active {
  background: var(--orchb-acc);
  border-color: var(--orchb-acc);
  color: #fff;
}

/* Human sentence plus the upcoming fire times, in one tinted block. */
.orsch-inspector .orchb-cron-box {
  background: var(--orchb-bg);
  border-radius: var(--orchb-r-node);
  padding: 10px 12px;
}

.orsch-inspector .orchb-cron-human {
  font-size: 11.5px;
  color: var(--orchb-ink-3);
  line-height: 1.5;
  margin-top: 2px;
}

.orsch-inspector .orchb-cron-box .orchb-cron-human {
  font-weight: 600;
  color: var(--orchb-ink);
  margin: 0 0 6px;
}

.orsch-inspector .orchb-next-runs__label {
  font: 600 9.5px/1 var(--orchb-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orchb-ink-4);
  margin-bottom: 3px;
}

.orsch-inspector .orchb-next-runs {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.orsch-inspector .orchb-next-runs li {
  font: 400 11px var(--orchb-mono);
  color: var(--orchb-ink-3);
}