/*
 * <sb-job-story> — "Follow the job" section for getspacebunny.com.
 * Framework-free, no build step, no network requests. Pair with job-story.js.
 *
 * Public palette hooks (all optional): set any --sb-* property on
 * sb-job-story (or an ancestor such as :root) to map it to the site palette.
 * Defaults follow design/tokens.json: light, dark, and increased contrast.
 */

@property --sbjs-p1 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sbjs-p2 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sbjs-p3 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sbjs-p4 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sbjs-p5 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sbjs-pv { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ---------------------------------------------------------------- tokens -- */

sb-job-story {
  /* page (light) */
  --_canvas: #F4F7FB; --_surface: #FFFFFF; --_card: #FFFFFF; --_raised: #E9EFF6;
  --_ink: #0B1F33; --_ink-2: #4B5E73; --_line: #CBD6E4; --_line-strong: #748397;
  --_accent: #B44212; --_accent-soft: #FFF0E6; --_on-accent: #FFFFFF; --_focus: #1756A1;
  --_success: #146B46; --_success-soft: #E2F2E8; --_danger: #AD2E2C; --_danger-soft: #FCE7E5;
  --_shadow: 0 1px 2px rgb(6 21 36 / 0.06), 0 12px 32px -8px rgb(6 21 36 / 0.16);
  /* stage: a navy blueprint in every appearance (survey-cover navy/white/orange) */
  --_stage: #0B1F33; --_stage-edge: #0B1F33; --_stage-raised: #16334F; --_stage-ink: #FFFFFF;
  --_stage-ink-2: #C9D4E0; --_stage-line: #7D96B0; --_stage-faint: #2A4864; --_stage-accent: #F08A5A;
  --_stage-success: #90D6A9; --_stage-focus: #94C4FF; --_stage-grid: rgb(255 255 255 / 0.05);
  --_stage-glow: rgb(240 138 90 / 0.10);

  --c-canvas: var(--sb-canvas, var(--_canvas));
  --c-surface: var(--sb-surface, var(--_surface));
  --c-card: var(--sb-card, var(--_card));
  --c-raised: var(--sb-raised, var(--_raised));
  --c-ink: var(--sb-ink, var(--_ink));
  --c-ink-2: var(--sb-ink-2, var(--_ink-2));
  --c-line: var(--sb-line, var(--_line));
  --c-line-strong: var(--sb-line-strong, var(--_line-strong));
  --c-accent: var(--sb-accent, var(--_accent));
  --c-accent-soft: var(--sb-accent-soft, var(--_accent-soft));
  --c-on-accent: var(--sb-on-accent, var(--_on-accent));
  --c-focus: var(--sb-focus, var(--_focus));
  --c-success: var(--sb-success, var(--_success));
  --c-success-soft: var(--sb-success-soft, var(--_success-soft));
  --c-danger: var(--sb-danger, var(--_danger));
  --c-danger-soft: var(--sb-danger-soft, var(--_danger-soft));
  --c-shadow: var(--sb-shadow, var(--_shadow));
  --c-stage: var(--sb-stage, var(--_stage));
  --c-stage-edge: var(--sb-stage-edge, var(--_stage-edge));
  --c-stage-raised: var(--sb-stage-raised, var(--_stage-raised));
  --c-stage-ink: var(--sb-stage-ink, var(--_stage-ink));
  --c-stage-ink-2: var(--sb-stage-ink-2, var(--_stage-ink-2));
  --c-stage-line: var(--sb-stage-line, var(--_stage-line));
  --c-stage-faint: var(--sb-stage-faint, var(--_stage-faint));
  --c-stage-accent: var(--sb-stage-accent, var(--_stage-accent));
  --c-stage-success: var(--sb-stage-success, var(--_stage-success));
  --c-stage-focus: var(--sb-stage-focus, var(--_stage-focus));
  --c-stage-grid: var(--sb-stage-grid, var(--_stage-grid));
  --c-stage-glow: var(--sb-stage-glow, var(--_stage-glow));

  --f-text: var(--sb-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --f-display: var(--sb-font-display, -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --f-mono: var(--sb-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) sb-job-story {
    --_canvas: #0B1F33; --_surface: #0F2740; --_card: #16334F; --_raised: #16334F;
    --_ink: #FFFFFF; --_ink-2: #C9D4E0; --_line: #2F4D6B; --_line-strong: #7D96B0;
    --_accent: #F08A5A; --_accent-soft: #382A26; --_on-accent: #0B1F33; --_focus: #94C4FF;
    --_success: #90D6A9; --_success-soft: #173C2A; --_danger: #FFB4A9; --_danger-soft: #4B2525;
    --_shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -12px rgb(0 0 0 / 0.55);
    --_stage: #0F2740; --_stage-edge: #2F4D6B; --_stage-raised: #16334F; --_stage-faint: #2F4D6B;
  }
}
:root[data-theme="dark"] sb-job-story {
  --_canvas: #0B1F33; --_surface: #0F2740; --_card: #16334F; --_raised: #16334F;
  --_ink: #FFFFFF; --_ink-2: #C9D4E0; --_line: #2F4D6B; --_line-strong: #7D96B0;
  --_accent: #F08A5A; --_accent-soft: #382A26; --_on-accent: #0B1F33; --_focus: #94C4FF;
  --_success: #90D6A9; --_success-soft: #173C2A; --_danger: #FFB4A9; --_danger-soft: #4B2525;
  --_shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -12px rgb(0 0 0 / 0.55);
  --_stage: #0F2740; --_stage-edge: #2F4D6B; --_stage-raised: #16334F; --_stage-faint: #2F4D6B;
}

/* Increased contrast: tokens.json contrastOverrides. */
@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) sb-job-story {
    --_canvas: #FFFFFF; --_surface: #FFFFFF; --_card: #FFFFFF; --_raised: #E8EDF4;
    --_ink: #06172B; --_ink-2: #2A3F58; --_line: #4A607B; --_line-strong: #4A607B;
    --_accent: #8B2D08; --_accent-soft: #FFF1E8; --_on-accent: #FFFFFF; --_focus: #0F4381;
    --_success: #07522D; --_success-soft: #D5F0DF; --_danger: #8C1718; --_danger-soft: #FCE1DD;
    --_stage: #061524; --_stage-edge: #061524; --_stage-raised: #102B45; --_stage-ink-2: #E2EAF3;
    --_stage-line: #A6BED8; --_stage-faint: #4A6A8A; --_stage-accent: #FFC29B; --_stage-success: #B5F2C9;
    --_stage-focus: #C4DFFF; --_stage-grid: rgb(255 255 255 / 0.07);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) sb-job-story {
    --_canvas: #061524; --_surface: #0A1D31; --_card: #102B45; --_raised: #102B45;
    --_ink: #FFFFFF; --_ink-2: #E2EAF3; --_line: #A6BED8; --_line-strong: #A6BED8;
    --_accent: #FFC29B; --_accent-soft: #30221D; --_on-accent: #071829; --_focus: #C4DFFF;
    --_success: #B5F2C9; --_success-soft: #103720; --_danger: #FFD0C7; --_danger-soft: #421C1B;
    --_stage: #0A1D31; --_stage-edge: #A6BED8; --_stage-raised: #102B45; --_stage-ink-2: #E2EAF3;
    --_stage-line: #A6BED8; --_stage-faint: #4A6A8A; --_stage-accent: #FFC29B; --_stage-success: #B5F2C9;
    --_stage-focus: #C4DFFF; --_stage-grid: rgb(255 255 255 / 0.07);
  }
}
@media (prefers-contrast: more) {
  :root[data-theme="dark"] sb-job-story {
    --_canvas: #061524; --_surface: #0A1D31; --_card: #102B45; --_raised: #102B45;
    --_ink: #FFFFFF; --_ink-2: #E2EAF3; --_line: #A6BED8; --_line-strong: #A6BED8;
    --_accent: #FFC29B; --_accent-soft: #30221D; --_on-accent: #071829; --_focus: #C4DFFF;
    --_success: #B5F2C9; --_success-soft: #103720; --_danger: #FFD0C7; --_danger-soft: #421C1B;
    --_stage: #0A1D31; --_stage-edge: #A6BED8; --_stage-raised: #102B45; --_stage-ink-2: #E2EAF3;
    --_stage-line: #A6BED8; --_stage-faint: #4A6A8A; --_stage-accent: #FFC29B; --_stage-success: #B5F2C9;
    --_stage-focus: #C4DFFF; --_stage-grid: rgb(255 255 255 / 0.07);
  }
}

/* ------------------------------------------------------------------ base -- */

sb-job-story {
  display: block;
  color: var(--c-ink);
  background: var(--c-canvas);
  font-family: var(--f-text);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
sb-job-story *, sb-job-story *::before, sb-job-story *::after { box-sizing: border-box; }
sb-job-story :focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.sbjs-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sbjs { padding-block: clamp(80px, 11vw, 160px); }
.sbjs-wrap {
  max-width: var(--sb-max-width, 1320px);
  margin-inline: auto;
  padding-inline: var(--sb-gutter, clamp(16px, 4vw, 48px));
}

/* ---------------------------------------------------------------- header -- */

.sbjs-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 24px 32px;
  margin-bottom: clamp(56px, 8vw, 112px);
}
.sbjs-eyebrow {
  margin: 0 0 18px;
  font: 600 0.8125rem/1.2 var(--f-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.sbjs-title {
  margin: 0;
  max-width: 13ch;
  font: 700 clamp(2.5rem, 4.6vw + 1rem, 5.25rem)/1.0 var(--f-display);
  letter-spacing: -0.038em;
  color: var(--c-ink);
  text-wrap: balance;
}
.sbjs-lede {
  margin: 28px 0 0;
  max-width: 40ch;
  font-size: clamp(1.125rem, 0.6vw + 0.95rem, 1.375rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--c-ink-2);
  text-wrap: pretty;
}
.sbjs-lede strong { color: var(--c-ink); font-weight: 600; }

/* -------------------------------------------- chapters: sequence (default) -- */

.sbjs-chapters {
  display: grid;
  gap: clamp(72px, 10vw, 128px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.sbjs-ch {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin: 0;
  padding: 0;
  scroll-margin-top: calc(var(--sb-sticky-offset, 0px) + 24px);
}
.sbjs-copy { width: 100%; min-width: 0; max-width: 34rem; }
.sbjs-role {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
  font: 600 0.875rem/1 var(--f-text);
  color: var(--c-ink);
}
.sbjs-num {
  font: 600 0.8125rem/1 var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-2);
}
.sbjs-team {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  border-radius: 999px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  letter-spacing: 0.01em;
}
.sbjs-team svg { width: 16px; height: 16px; flex: none; }
.sbjs-h3 {
  margin: 0;
  font: 700 clamp(1.875rem, 2.4vw + 0.9rem, 3.25rem)/1.04 var(--f-display);
  letter-spacing: -0.032em;
  color: var(--c-ink);
  text-wrap: balance;
}
.sbjs-h3:focus { outline: none; }
.sbjs-h3:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; }
.sbjs-text {
  margin: 18px 0 0;
  max-width: 36ch;
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--c-ink-2);
  text-wrap: pretty;
}
.sbjs-benefit {
  display: grid;
  gap: 4px;
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--c-accent);
  color: var(--c-ink);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.sbjs-benefit strong {
  color: var(--c-accent);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Product evidence remains visible beside the animated concept drawing. */
.sbjs-proof {
  margin: 24px 0 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-surface);
}
.sbjs-proof a {
  display: block;
  color: var(--c-ink);
  text-decoration: none;
}
.sbjs-proof a:focus-visible { outline-offset: -4px; }
.sbjs-proof img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  background: var(--c-raised);
}
.sbjs-proof--screen img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.sbjs-proof figcaption {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-top: 1px solid var(--c-line);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--c-ink-2);
}
.sbjs-proof figcaption strong { color: var(--c-ink); font-weight: 600; }
.sbjs-proof figcaption span { font-size: 0.75rem; }
.sbjs-proof figcaption a {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sbjs-handoff {
  display: grid;
  max-width: 26rem;
  margin: 32px 0 0;
  border-top: 1px solid var(--c-line);
}
.sbjs-handoff > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--c-line);
}
.sbjs-handoff dt {
  flex: 0 0 8.5em;
  font: 600 0.75rem/1.2 var(--f-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.sbjs-handoff dd {
  flex: 1 1 11em;
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font: 600 0.9375rem/1.35 var(--f-text);
  color: var(--c-ink);
}
.sbjs-handoff .out dd { color: var(--c-ink); }
.sbjs-handoff .out dd::before {
  content: "→";
  margin-right: 8px;
  color: var(--c-accent);
  font-weight: 700;
}

.sbjs-media { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; }
.sbjs-fig:empty { display: none; }
.sbjs-fig { margin: 0; }

.sbjs-note {
  margin: clamp(56px, 8vw, 96px) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-ink-2);
}

@media (min-width: 768px) {
  .sbjs-ch {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
  }
}
@media (max-width: 599px) {
  .sbjs-head { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------- job record card -- */

.sbjs-card {
  position: relative;
  width: 100%;
  max-width: 23rem;
  margin: 0;
  padding: 14px 16px 12px;
  border: 1px solid var(--c-line);
  border-radius: 18px;
  background: var(--c-card);
  color: var(--c-ink);
  box-shadow: var(--c-shadow);
  font: 400 0.8125rem/1.35 var(--f-text);
}
.sbjs-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--c-line);
}
.sbjs-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.sbjs-ico svg { width: 16px; height: 16px; }
.sbjs-card-title { display: grid; gap: 2px; min-width: 0; flex: 1 1 8em; overflow-wrap: anywhere; }
.sbjs-card-title b { font: 650 0.875rem/1.2 var(--f-text); letter-spacing: -0.005em; }
.sbjs-card-title small { font-size: 0.75rem; color: var(--c-ink-2); }
.sbjs-id {
  margin-left: auto;
  padding-left: 8px;
  font: 500 0.75rem/1 var(--f-mono);
  color: var(--c-ink-2);
  white-space: nowrap;
}
.sbjs-rows { margin: 0; }
.sbjs-rows > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 5px 0;
}
.sbjs-rows dt { color: var(--c-ink-2); }
.sbjs-rows dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sbjs-ok { color: var(--c-success); }
.sbjs-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--c-line);
  font-size: 0.75rem;
  color: var(--c-ink-2);
}
.sbjs-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font: 650 0.75rem/1 var(--f-text);
  background: var(--c-success-soft);
  color: var(--c-success);
}
.sbjs-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sbjs-pill.is-accent { background: var(--c-accent-soft); color: var(--c-accent); }
.sbjs-pill.is-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.sbjs-history { margin: 0; padding: 2px 0 0; list-style: none; }
.sbjs-history li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0 5px 18px;
}
.sbjs-history li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  border: 1.5px solid var(--c-accent);
  background: var(--c-card);
}
.sbjs-history li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(50% + 5px);
  height: calc(100% - 4px);
  border-left: 1.5px solid var(--c-accent);
}
.sbjs-history li:last-child::after { display: none; }
.sbjs-history span { color: var(--c-ink-2); }
.sbjs-history b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ------------------------------------------------------- stage drawing -- */

.sbjs-draw {
  --hue: var(--c-stage-line);
  position: relative;
  container: sbjs-draw / inline-size;
  aspect-ratio: 760 / 440;
  width: 100%;
  color: var(--c-stage-ink);
  font-family: var(--f-text);
}
.sbjs-draw svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sbjs-draw svg * { vector-effect: non-scaling-stroke; }

/* progress: each stage reads its own --p (0 hidden → 1 complete) */
.sbjs-draw .st-1 { --p: var(--sbjs-p1, 1); }
.sbjs-draw .st-2 { --p: var(--sbjs-p2, 1); }
.sbjs-draw .st-3 { --p: var(--sbjs-p3, 1); }
.sbjs-draw .st-4 { --p: var(--sbjs-p4, 1); }
.sbjs-draw .st-5 { --p: var(--sbjs-p5, 1); }
.sbjs-draw :is(.d, .pp, .w) { --q: clamp(0, (var(--p) - var(--d, 0)) / var(--s, 0.5), 1); }
.sbjs-draw .d {
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1.002 - var(--q));
  stroke-opacity: min(1, calc(var(--q) * 40));
  fill-opacity: var(--q);
}
.sbjs-draw .pp {
  opacity: var(--q);
  transform: scale(calc(0.7 + 0.3 * var(--q)));
  transform-box: fill-box;
  transform-origin: center;
}
.sbjs-draw .w { clip-path: inset(-3px calc((1 - var(--q)) * (100% + 6px) - 3px) -3px -3px round 8px); }
.sbjs-draw .sbjs-chip { --d: 0.3; --s: 0.25; }
.sbjs-draw .sbjs-chip.keep { --d: 0.45; }

/* emphasis: the current team's layer is orange; earlier layers settle to line colour */
.sbjs-draw[data-active="1"] .st-1, .sbjs-draw[data-active="2"] .st-2, .sbjs-draw[data-active="3"] .st-3,
.sbjs-draw[data-active="4"] .st-4, .sbjs-draw[data-active="5"] .st-5 { --hue: var(--c-stage-accent); }

.sbjs-draw .wallfill { fill: var(--c-stage-raised); stroke: none; }
.sbjs-draw .wall { stroke: var(--c-stage-ink-2); stroke-width: 1.5px; }
.sbjs-draw .gap { fill: var(--c-stage); stroke: none; }
.sbjs-draw .thin { stroke: var(--c-stage-ink-2); stroke-width: 1px; }
.sbjs-draw .furn { stroke: var(--c-stage-line); stroke-width: 1.5px; }
.sbjs-draw .furn-f { fill: var(--c-stage); stroke: var(--c-stage-line); stroke-width: 1.25px; }
.sbjs-draw .dim { stroke: var(--hue); stroke-width: 1.25px; }
.sbjs-draw .dash { stroke: var(--c-stage-line); stroke-width: 1px; stroke-dasharray: 3 4; }
.sbjs-draw .cov { fill: var(--hue); fill-opacity: 0.09; stroke: none; }
.sbjs-draw .cov-spk { stroke: var(--hue); stroke-width: 1px; stroke-dasharray: 1 4; fill: var(--hue); fill-opacity: 0.045; }
.sbjs-draw .cov-line { stroke: var(--hue); stroke-width: 1.25px; stroke-dasharray: 2 5; }
.sbjs-draw .cov-ring { stroke: var(--hue); stroke-width: 1.5px; stroke-dasharray: 5 5; fill: var(--hue); fill-opacity: 0.06; }
.sbjs-draw .dev { stroke: var(--c-stage-ink); stroke-width: 1.5px; fill: var(--c-stage); }
.sbjs-draw .dev-f { fill: var(--c-stage-ink); stroke: none; }
.sbjs-draw .sig { stroke: var(--hue); stroke-width: 1.75px; }
.sbjs-draw .ok circle { fill: var(--c-stage-success); stroke: none; }
.sbjs-draw .ok path { stroke: var(--c-stage); stroke-width: 1.75px; }
.sbjs-draw .rack { stroke: var(--c-stage-ink-2); stroke-width: 1.5px; fill: var(--c-stage); }
.sbjs-draw .unit { stroke: var(--c-stage-line); stroke-width: 1px; fill: var(--c-stage-raised); }
.sbjs-draw .led { fill: var(--c-stage-success); stroke: none; }
.sbjs-draw .pin path:first-child { fill: var(--hue); stroke: var(--c-stage); stroke-width: 1.5px; }
.sbjs-draw .pin path + path { stroke: var(--c-stage); stroke-width: 1.75px; }
.sbjs-draw .photo rect, .sbjs-draw .photo circle { stroke: var(--hue); stroke-width: 1.5px; fill: var(--c-stage); }
.sbjs-draw .photo .cone { fill: var(--hue); fill-opacity: 0.16; stroke: none; }
.sbjs-draw .meter { stroke: var(--hue); stroke-width: 1.5px; fill: none; }
.sbjs-draw .hl { stroke: var(--c-stage-accent); stroke-width: 3px; }
.sbjs-draw .hl-fill { fill: var(--c-stage-accent); fill-opacity: 0.16; stroke: var(--c-stage-accent); stroke-width: 1.5px; }
.sbjs-draw .thread { stroke: var(--c-stage-accent); stroke-width: 1.5px; stroke-dasharray: 1 5; }
.sbjs-draw .thread.d { stroke-dasharray: 1 1; }
.sbjs-draw .pulse { stroke: var(--c-stage-accent); stroke-width: 1.5px; opacity: 0; transform-box: fill-box; transform-origin: center; }


/* Architectural plan: oriented seating, discrete routes and referenced elevation. */
.sbjs-draw .plan-id { fill: var(--c-stage-ink); stroke: none; font: 600 11px var(--f-mono); }
.sbjs-draw .rack-tick { stroke: var(--c-stage-line); stroke-width: 1px; }
.sbjs-draw .rack-reference { stroke: var(--c-stage-line); stroke-width: 1px; stroke-dasharray: 4 5; }
.sbjs-chip.seat-number { padding: 2px; min-width: 17px; justify-content: center; border-radius: 50%; border-color: var(--c-stage-accent); }
.sbjs-draw:not([data-active="2"]) .coverage { display: none; }
.sbjs-draw[data-active="5"] .st-4 { display: none; }
@container sbjs-draw (max-width: 480px) { .sbjs-chip.rack-label { font-size: 8px; } }

/* labels: real HTML text, never faded (wiped with clip-path instead) */
.sbjs-chip {
  position: absolute;
  left: calc(var(--x) / 760 * 100%);
  top: calc(var(--y) / 440 * 100%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--c-stage-faint);
  border-radius: 8px;
  background: var(--c-stage-raised);
  color: var(--c-stage-ink);
  font: 600 clamp(0.6875rem, 1.45cqi, 0.8125rem)/1.15 var(--f-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
  white-space: nowrap;
  pointer-events: none;
}
.sbjs-chip.is-start { transform: translate(0, -50%); }
.sbjs-chip.is-end { transform: translate(-100%, -50%); }
.sbjs-chip.is-mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0; }
.sbjs-chip.is-bare { padding: 0; border: 0; background: none; color: var(--c-stage-ink-2); font-weight: 500; }
.sbjs-chip.is-hot { border-color: var(--c-stage-accent); }
.sbjs-chip .k { color: var(--c-stage-success); font-weight: 700; }
.sbjs-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-stage-accent); flex: none; }
.sbjs-draw[data-active] .sbjs-chip:not(.keep) { display: none; }
.sbjs-draw[data-active="1"] .sbjs-chip.st-1, .sbjs-draw[data-active="2"] .sbjs-chip.st-2,
.sbjs-draw[data-active="3"] .sbjs-chip.st-3, .sbjs-draw[data-active="4"] .sbjs-chip.st-4,
.sbjs-draw[data-active="5"] .sbjs-chip.st-5 { display: inline-flex; }
@container sbjs-draw (max-width: 560px) { .sbjs-chip.pri-2 { display: none !important; } }
@container sbjs-draw (max-width: 480px) { .sbjs-chip .sbjs-cl { display: none; } }

/* static per-chapter figures: show layers up to and including this chapter */
.sbjs-draw[data-upto="1"] :is(.st-2, .st-3, .st-4, .st-5),
.sbjs-draw[data-upto="2"] :is(.st-3, .st-4, .st-5),
.sbjs-draw[data-upto="3"] :is(.st-4, .st-5),
.sbjs-draw[data-upto="4"] .st-5 { display: none !important; }

/* per-chapter figure panel (sequence layout) */
.sbjs-figpanel {
  position: relative;
  overflow: hidden;
  padding: clamp(12px, 3%, 24px);
  border: 1px solid var(--c-stage-edge);
  border-radius: 24px;
  background-color: var(--c-stage);
  background-image:
    radial-gradient(80% 70% at 85% 0%, var(--c-stage-glow), transparent 70%),
    linear-gradient(var(--c-stage-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-stage-grid) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
  background-position: 0 0, -1px -1px, -1px -1px;
}
.sbjs-fig + .sbjs-card { margin: -28px 0 0 auto; width: calc(100% - 24px); z-index: 1; }
.sbjs-fig:empty + .sbjs-card { margin: 0; width: 100%; }
.sbjs-fig .sbjs-figpanel { padding-bottom: calc(clamp(12px, 3%, 24px) + 24px); }

/* mobile entrance: this chapter's layer draws as its figure scrolls in */
@keyframes sbjs-pv { from { --sbjs-pv: 0; } to { --sbjs-pv: 1; } }
@supports (animation-timeline: view()) {
  sb-job-story[data-motion="on"][data-mode="sequence"] .sbjs-fig .sbjs-draw {
    animation: sbjs-pv linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 45%;
  }
}
.sbjs-fig .sbjs-draw[data-upto="1"] .st-1, .sbjs-fig .sbjs-draw[data-upto="2"] .st-2,
.sbjs-fig .sbjs-draw[data-upto="3"] .st-3, .sbjs-fig .sbjs-draw[data-upto="4"] .st-4,
.sbjs-fig .sbjs-draw[data-upto="5"] .st-5 { --p: var(--sbjs-pv, 1); }

/* ------------------------------------------------------------ story mode -- */

.sbjs-stage { display: none; }

sb-job-story[data-mode="story"] .sbjs-body {
  --stage-h: min(840px, calc(34vw + 400px), calc(100vh - var(--sb-sticky-offset, 0px) - 48px));
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: clamp(32px, 4.5vw, 72px);
}
@supports (height: 100svh) {
  sb-job-story[data-mode="story"] .sbjs-body { --stage-h: min(840px, calc(34vw + 400px), calc(100svh - var(--sb-sticky-offset, 0px) - 48px)); }
}
sb-job-story[data-mode="story"] .sbjs-chapters { grid-column: 1; grid-row: 1; gap: 0; }
sb-job-story[data-mode="story"] .sbjs-ch {
  display: flex;
  align-items: center;
  min-height: var(--stage-h);
  padding-block: 24px;
}
sb-job-story[data-mode="story"] .sbjs-media {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
sb-job-story[data-mode="story"] .sbjs-stage {
  display: block;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: calc(var(--sb-sticky-offset, 0px) + max(24px, (100vh - var(--sb-sticky-offset, 0px) - var(--stage-h)) / 2));
  height: var(--stage-h);
}
sb-job-story[data-mode="story"] .sbjs-team { background: transparent; color: var(--c-ink-2); box-shadow: inset 0 0 0 1px var(--c-line-strong); transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
sb-job-story[data-mode="story"] .sbjs-ch.is-active .sbjs-team { background: var(--c-accent-soft); color: var(--c-accent); box-shadow: inset 0 0 0 1px transparent; }

.sbjs-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 18px clamp(16px, 2.2vw, 28px) clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--c-stage-edge);
  border-radius: 28px;
  background-color: var(--c-stage);
  background-image:
    radial-gradient(70% 55% at 88% 0%, var(--c-stage-glow), transparent 70%),
    linear-gradient(var(--c-stage-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-stage-grid) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
  background-position: 0 0, -1px -1px, -1px -1px;
  color: var(--c-stage-ink);
  container: sbjs-panel / inline-size;
  overflow: hidden;
  --c-focus: var(--c-stage-focus);
}
.sbjs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--c-stage-ink-2);
}
.sbjs-bar b { color: var(--c-stage-ink); font-weight: 600; }
.sbjs-badge {
  padding: 4px 9px;
  border: 1px solid var(--c-stage-line);
  border-radius: 999px;
  font: 600 0.6875rem/1 var(--f-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-stage-ink-2);
  white-space: nowrap;
}

/* progress rail */
.sbjs-rail { position: relative; }
.sbjs-rail ol {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.sbjs-rail button {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 4px 2px 6px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--c-stage-ink-2);
  font: 500 0.8125rem/1.1 var(--f-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sbjs-rail button:hover { color: var(--c-stage-ink); }
.sbjs-rail button:focus-visible { outline: 2px solid var(--c-stage-focus); outline-offset: 0; border-radius: 12px; }
.sbjs-node {
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border: 1.5px solid var(--c-stage-line);
  border-radius: 50%;
  background: var(--c-stage);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sbjs-rail li.is-done .sbjs-node { background: var(--c-stage-accent); border-color: var(--c-stage-accent); }
.sbjs-rail button[aria-current="step"] { color: var(--c-stage-ink); font-weight: 650; }
.sbjs-rail button[aria-current="step"] .sbjs-node {
  background: var(--c-stage);
  border: 4px solid var(--c-stage-accent);
  box-shadow: 0 0 0 5px rgb(240 138 90 / 0.18);
}
.sbjs-track {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 15px;
  height: 1.5px;
  background: var(--c-stage-line);
}
.sbjs-fill {
  position: absolute;
  inset: 0;
  background: var(--c-stage-accent);
  transform-origin: left center;
  transform: scaleX(var(--sbjs-fill, 0));
}
sb-job-story[data-mode="story"] .sbjs-fill {
  transform: scaleX(calc((var(--sbjs-p2, 1) + var(--sbjs-p3, 1) + var(--sbjs-p4, 1) + var(--sbjs-p5, 1)) / 4));
}

.sbjs-viz {
  position: relative;
  flex: 1 1 auto;
  min-height: 160px;
  container-type: size;
  display: grid;
  place-items: center;
}
.sbjs-viz .sbjs-draw { width: min(100cqw, 100cqh * 760 / 440); }

/* the job record: one artifact card per chapter, accumulating left to right */
.sbjs-stack {
  --card-w: min(252px, 62cqi);
  position: relative;
  flex: none;
  height: 236px;
}
.sbjs-stack .sbjs-card {
  position: absolute;
  top: 0;
  left: calc((100% - var(--card-w)) / 4 * (var(--k) - 1));
  z-index: var(--k);
  width: var(--card-w);
  max-width: none;
  height: 208px;
  overflow: hidden;
  padding: 12px 14px 10px;
  border-radius: 16px;
  font-size: 0.75rem;
  transform: translateY(calc(100% + 40px));
  visibility: hidden;
  transition: transform .55s var(--ease-out), visibility 0s linear .55s, border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sbjs-stack .sbjs-card .sbjs-rows > div, .sbjs-stack .sbjs-history li { padding-block: 3.5px; }
.sbjs-stack .sbjs-card:has(.sbjs-history) .sbjs-card-foot { display: none; }
.sbjs-stack .sbjs-card.is-in { transform: none; visibility: visible; transition: transform .55s var(--ease-out), visibility 0s, border-color .3s var(--ease), box-shadow .3s var(--ease); }
.sbjs-stack .sbjs-card.is-current { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent), var(--c-shadow); }
.sbjs-tl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
}
.sbjs-tl i {
  position: absolute;
  top: 6px;
  left: calc((100% - var(--card-w)) / 4 * (var(--k) - 1) + 18px);
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--c-stage-line);
  border-radius: 50%;
  background: var(--c-stage);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.sbjs-tl i.is-in { background: var(--c-stage-ink-2); border-color: var(--c-stage-ink-2); }
.sbjs-tl::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 22px;
  right: calc(var(--card-w) - 22px);
  height: 1.5px;
  background: var(--c-stage-faint);
}
.sbjs-tl::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 22px;
  right: calc(var(--card-w) - 22px);
  height: 1.5px;
  background: var(--c-stage-accent);
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform .8s var(--ease-out);
}
.sbjs-stage[data-active="5"] .sbjs-tl::after { transform: scaleX(1); }
.sbjs-stage[data-active="5"] .sbjs-tl i.is-in { background: var(--c-stage-accent); border-color: var(--c-stage-accent); }

@container sbjs-panel (max-width: 520px) {
  .sbjs-bar .sbjs-where { display: none; }
  .sbjs-rail button { font-size: 0.75rem; }
  .sbjs-stack { height: 214px; }
  .sbjs-stack .sbjs-card { height: 188px; }
  .sbjs-stack .sbjs-card .sbjs-card-foot { display: none; }
}

@media (max-height: 760px) {
  sb-job-story[data-mode="story"] .sbjs-bar { display: none; }
  .sbjs-stack { height: 196px; }
  .sbjs-stack .sbjs-card { height: 170px; }
  .sbjs-stack .sbjs-card .sbjs-card-foot { display: none; }
}

/* ------------------------------------------------------------ motion -- */

@keyframes sbjs-pulse {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}
sb-job-story[data-motion="on"] .sbjs-draw[data-active="5"] .pulse {
  animation: sbjs-pulse 1.8s var(--ease) 0.4s 3;
}
.sbjs-draw .sbjs-chip, .sbjs-draw .sig, .sbjs-draw .dim, .sbjs-draw .cov, .sbjs-draw .cov-line, .sbjs-draw .cov-ring,
.sbjs-draw .pin path, .sbjs-draw .photo *, .sbjs-draw .meter { transition: stroke .35s var(--ease), fill .35s var(--ease); }
sb-job-story[data-motion="off"] *, sb-job-story[data-motion="off"] *::before, sb-job-story[data-motion="off"] *::after {
  transition-duration: 0s !important;
  animation: none !important;
}

/* Scroll-linked progress for story mode: each chapter's view timeline drives its layer. */
@keyframes sbjs-p1 { from { --sbjs-p1: 0; } to { --sbjs-p1: 1; } }
@keyframes sbjs-p2 { from { --sbjs-p2: 0; } to { --sbjs-p2: 1; } }
@keyframes sbjs-p3 { from { --sbjs-p3: 0; } to { --sbjs-p3: 1; } }
@keyframes sbjs-p4 { from { --sbjs-p4: 0; } to { --sbjs-p4: 1; } }
@keyframes sbjs-p5 { from { --sbjs-p5: 0; } to { --sbjs-p5: 1; } }
@supports (animation-timeline: view()) and (timeline-scope: none) {
  sb-job-story[data-mode="story"][data-scroll="css"] .sbjs {
    timeline-scope: --sbjs-c1, --sbjs-c2, --sbjs-c3, --sbjs-c4, --sbjs-c5;
    animation-name: sbjs-p1, sbjs-p2, sbjs-p3, sbjs-p4, sbjs-p5;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --sbjs-c1, --sbjs-c2, --sbjs-c3, --sbjs-c4, --sbjs-c5;
    animation-range: entry 0% cover 50%, entry 40% cover 50%, entry 40% cover 50%, entry 40% cover 50%, entry 40% cover 50%;
  }
  sb-job-story[data-mode="story"][data-scroll="css"] .sbjs-ch:nth-child(1) { view-timeline: --sbjs-c1 block; }
  sb-job-story[data-mode="story"][data-scroll="css"] .sbjs-ch:nth-child(2) { view-timeline: --sbjs-c2 block; }
  sb-job-story[data-mode="story"][data-scroll="css"] .sbjs-ch:nth-child(3) { view-timeline: --sbjs-c3 block; }
  sb-job-story[data-mode="story"][data-scroll="css"] .sbjs-ch:nth-child(4) { view-timeline: --sbjs-c4 block; }
  sb-job-story[data-mode="story"][data-scroll="css"] .sbjs-ch:nth-child(5) { view-timeline: --sbjs-c5 block; }
}

/* Windows High Contrast / forced colours: keep the line art visible with system colours. */
@media (forced-colors: active) {
  .sbjs-figpanel, .sbjs-panel { background: Canvas; border-color: CanvasText; }
  .sbjs-draw svg * { stroke: CanvasText !important; fill: none !important; }
  .sbjs-chip { forced-color-adjust: auto; }
  .sbjs-node, .sbjs-fill { forced-color-adjust: none; background: Highlight; border-color: CanvasText; }
}

@media print {
  sb-job-story[data-mode="story"] .sbjs-stage { display: none; }
  sb-job-story[data-mode="story"] .sbjs-media { position: static !important; width: auto; height: auto; clip: auto; clip-path: none; }
  sb-job-story[data-mode="story"] .sbjs-ch { min-height: 0; }
}