/* obseed case figures and demo, in the case-figures hand. Loaded after
   case-figures.css; only this page's compositions live here. */

.cf, .cfd { --case-ink: #8C6715; }

/* ---------- 1. three layers, the headline lifted ---------- */
.ob1 { width: auto; max-width: 100%; }
.ob1 .ob1__k { margin: 0 0 18px 4px; }
.ob1__stack { display: flex; align-items: flex-start; }
.ob1__hi { flex: 0 0 auto; width: clamp(236px, 34cqi, 282px); }
.ob1 .ob1__hi .cf-hi__s { align-items: flex-start; }
.ob1 .ob1__hi .cf-hi__s::before { margin-top: 4px; }
.ob1__num {
  display: flex; align-items: baseline; gap: 10px; margin-top: 14px;
  font-size: clamp(52px, 9cqi, 68px); line-height: .9; font-weight: 600; letter-spacing: -0.035em; color: var(--cf-text);
}
.ob1__num span { font-family: var(--cf-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--hi); }
.ob1__card { position: relative; overflow: hidden; flex: 0 0 auto; }
.ob1__vitals { z-index: 1; width: clamp(200px, 27cqi, 226px); margin: 34px 0 0 -26px; padding-left: 44px; }
.ob1__series { z-index: 0; width: clamp(240px, 36cqi, 300px); margin: 68px 0 0 -26px; padding-left: 44px; background: color-mix(in srgb, var(--cf-card) 82%, var(--cf-soft)); }
.ob1 svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ob1__sparks { display: block; width: 100%; height: 54px; margin: 16px 0 4px; }
.ob1__sparks path { stroke: var(--cf-line); stroke-width: 1.5; }
.ob1__chart { display: block; width: calc(100% + 18px); height: 70px; margin: 16px -18px 2px 0; }
.ob1__area { fill: var(--cf-soft) !important; stroke: none; }
.ob1__line { stroke: var(--cf-line); stroke-width: 1.5; }
.ob1__note { stroke: var(--cf-marker); stroke-width: 1; stroke-dasharray: 2 3; }

@container (max-width: 699px) {
  .ob1 { width: 100%; max-width: 440px; }
  .ob1__stack { flex-direction: column; align-items: stretch; }
  .ob1__hi { width: auto; margin-right: 34px; }
  .ob1__vitals { width: auto; margin: -18px 10px 0 30px; padding: 34px 18px 16px; }
  .ob1__series { width: auto; margin: -18px -8px 0 56px; padding: 34px 26px 16px 18px; }
  .ob1__chart { width: calc(100% + 26px); margin-right: -26px; }
}

/* ---------- 2. the drill-down, the deepest level lifted ---------- */
.ob2 { width: 100%; max-width: 860px; --pad: 24px; --gap: 16px; --drop: 26px; }
.ob2 .ob2__k { margin: 0 0 18px 4px; }
.ob2__base {
  position: relative; margin-bottom: 56px; padding: 26px var(--pad) 28px;
  background: var(--cf-card); border-radius: 12px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cf-rule) 55%, transparent), var(--cf-rest);
}
.ob2__plan {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: var(--gap);
}
.ob2__track { /* one straight line down through the levels */
  position: absolute; left: calc(var(--pad) + 4.5px); top: 30.5px;
  width: calc((100% - 2 * var(--pad) - 3 * var(--gap)) / 4.3 * 3 + 3 * var(--gap));
  height: calc(var(--drop) * 3); overflow: visible;
}
.ob2__track path { fill: none; stroke: var(--cf-bar); stroke-width: 1.5; }
.ob2__step { position: relative; display: flex; flex-direction: column; min-width: 0; padding-top: 22px; }
.ob2__step:nth-child(2) { margin-top: var(--drop); }
.ob2__step:nth-child(3) { margin-top: calc(var(--drop) * 2); }
.ob2__step::before {
  content: ""; position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cf-card); box-shadow: 0 0 0 1.5px var(--cf-marker);
}
.ob2__step .cf__k { margin-bottom: 6px; }
.ob2__n { font-size: 15px; line-height: 1.25; font-weight: 600; color: var(--cf-text); }
.ob2__s { font-family: var(--cf-mono); font-size: 12px; line-height: 1.45; color: var(--cf-quiet); margin-top: 6px; }
.ob2__step--hi { padding-top: 0; margin: calc(var(--drop) * 3 - 14px) -44px -132px -8px; }
.ob2__step--hi::before { display: none; }
.ob2 .ob2__hi .cf-hi__s { align-items: flex-start; }
.ob2 .ob2__hi .cf-hi__s::before { margin-top: 4px; }
.ob2 svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ob2__chart { display: block; width: 100%; height: 64px; margin: 16px 0 2px; }
.ob2__elev { fill: var(--cf-soft) !important; stroke: none; }
.ob2__br { stroke: var(--cf-line); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ob2__hr { stroke: var(--cf-ink); stroke-width: 2; }

@container (max-width: 699px) {
  .ob2 { max-width: 440px; }
  .ob2__base { margin: 0 20px 0 0; padding: 24px 20px 0; }
  .ob2__plan { grid-template-columns: 1fr; gap: 22px; }
  .ob2__track { display: none; }
  .ob2__base::before { content: ""; position: absolute; left: 24px; top: 32px; bottom: 90px; width: 1.5px; background: var(--cf-bar); }
  .ob2__step { padding: 0 0 0 26px; }
  .ob2__step::before { top: 4px; }
  .ob2__step:nth-child(2), .ob2__step:nth-child(3) { margin-top: 0; }
  .ob2__step--hi { padding: 0; margin: 6px -36px -28px 14px; }
}

/* ---------- the demo: sequential or in parallel ---------- */
.bp.obd { max-width: 820px; }
.obd .bp__eyebrow { margin: 0 0 12px; }
.obd .bp__h { margin: 0 0 18px; }
.obd__g { background: var(--cf-ground); border-radius: 12px; padding: clamp(20px, 5vw, 44px); container-type: inline-size; }

.obd .bp__toggle.cfd__seg { display: inline-grid; margin: 0 0 22px; padding: 3px; border: 0; border-radius: 11px; background: color-mix(in srgb, var(--cf-card) 55%, transparent); }
.obd .bp__btn.cfd__opt { min-height: 38px; padding: 0 14px; border-radius: 8px; font-size: 13px; color: #6b665e; background: transparent; }
.obd .bp__btn.cfd__opt:hover { color: var(--cf-text); }
.obd .bp__btn--active.cfd__opt { background: var(--cf-card); color: var(--cf-text); transform: translateY(-1px); box-shadow: 0 0 0 1px var(--cf-rule), var(--cf-lift); }
.obd .bp__btn--active.cfd__opt::before { opacity: 1; background: var(--cf-ink); }
.obd .bp__btn:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: 2px; }

.obd .bp__board { display: grid; padding: 0; border: 0; border-radius: 0; background: none; }
.obd .bp__axis.obd__read {
  position: relative; z-index: 2; justify-self: end; width: min(360px, 60%); margin: 0 0 -40px;
  padding: 18px 20px 20px; background: var(--cf-card); border-radius: 16px;
  box-shadow: 0 0 0 1px var(--cf-rule), var(--cf-lift);
  font-family: inherit; font-size: clamp(16px, 2.6cqi, 19px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--cf-text);
}
.obd__read span:not([hidden]) { display: flex; gap: 12px; align-items: flex-start; }
.obd__read span::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; background: var(--st);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 16%, transparent); transition: background .35s ease;
}
.obd .bp__board[data-mode="seq"] { --st: var(--cf-terra); }
.obd .bp__board[data-mode="par"] { --st: var(--cf-green); }

.obd__tracks {
  margin-right: 28px; padding: 60px 22px 20px; background: var(--cf-card); border-radius: 12px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cf-rule) 55%, transparent), var(--cf-rest);
}
.obd .bp__track { gap: 16px; margin: 0; padding: 12px 0; }
.obd .bp__track + .bp__track { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cf-rule) 45%, transparent); }
.obd .bp__label { flex: 0 0 104px; text-align: left; font-size: 14px; font-weight: 500; color: var(--cf-text); }
.obd .bp__lane {
  height: 28px; border: 0; border-radius: 6px; box-shadow: none;
  background: linear-gradient(90deg, transparent calc(33.3% - .5px), var(--cf-rule) calc(33.3% - .5px) calc(33.3% + .5px), transparent calc(33.3% + .5px) calc(66.6% - .5px), var(--cf-rule) calc(66.6% - .5px) calc(66.6% + .5px), transparent calc(66.6% + .5px)), var(--cf-soft);
}
.obd .bp__bar { top: 4px; bottom: 4px; border-radius: 4px; }
.obd .bp__bar--design { background: var(--cf-green); }
.obd .bp__bar--dev { background: var(--cf-amber); }
.obd .bp__bar--mkt { background: var(--cf-terra); }
.obd .bp__cap { font-size: 13.5px; line-height: 1.55; color: var(--cf-quiet); margin: 22px 0 0; max-width: 60ch; }

@container (max-width: 619px) {
  .obd .bp__toggle.cfd__seg { display: grid; grid-template-columns: 1fr 1fr; }
  .obd .bp__btn.cfd__opt { padding: 0 8px; }
  .obd .bp__axis.obd__read { width: auto; justify-self: stretch; margin: 0 -2px -28px 16px; padding: 16px 16px 18px; font-size: 16px; }
  .obd__tracks { margin-right: 14px; padding: 42px 16px 12px; }
  .obd .bp__track { flex-direction: column; align-items: stretch; gap: 8px; }
  .obd .bp__label { flex: none; font-size: 13.5px; }
  .obd .bp__lane { flex: none; }
}
@media (pointer: coarse) { .obd .bp__btn.cfd__opt { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .obd .bp__bar, .obd__read span::before { transition: none; }
  .obd .bp__btn--active.cfd__opt { transform: none; }
}