/* Branchline case study — page shell tweaks and frames for the real product captures.
   The product UI itself lives in branchline-exact-*.html, captured from the running
   Branchline app with its seeded demo project “The Work That Keeps Time”. */

:root {
  --bl-forest: #0b1711;
  --bl-moss: #2d694b;
  --bl-sage: #93baa3;
  --bl-mint: #b9dfc8;
}

.project-case--branchline {
  --case-pink: var(--bl-sage);
  --case-pink-dark: var(--bl-forest);
}

.project-case--branchline .case-hero__copy {
  background-image:
    linear-gradient(180deg, transparent 58%, var(--bg) 96%),
    radial-gradient(circle at 1px 1px, #29302b 1px, transparent 0);
  background-size: 100% 100%, 18px 18px;
}
.project-case--branchline .case-hero__media { background: #0b1d12; }
.project-case--branchline .case-hero__media img { object-position: 50% center; filter: saturate(.92) contrast(1.03); }
.project-case--branchline .case-story blockquote { border-color: var(--bl-sage); }
.project-case--branchline .case-story--compact .case-story__body { min-height: 0; }

/* Real UI windows ------------------------------------------------------ */

.bl-exact.exact-case-showcase { background: #07090a; }
.bl-exact .exact-window { border-color: #2a2f2c; background: #fff; }
.bl-exact .exact-window__bar { background: #0f1211; }
.bl-exact .exact-capture,
.bl-exact .exact-capture iframe { background: #fff; }
.bl-exact .exact-capture--live iframe { pointer-events: auto; }
.bl-exact .exact-case-shot figcaption span { color: #9aa39d; }

.exact-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background: #0f1211;
}
.exact-tabs button {
  padding: 6px 10px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  color: #8a918d;
  background: transparent;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.exact-tabs button:hover { color: #dfe4e0; border-color: rgb(255 255 255 / 22%); }
.exact-tabs button.is-active { color: #0b1711; background: var(--bl-mint); border-color: var(--bl-mint); }
.exact-tabs em { margin-left: auto; align-self: center; color: #5c655f; font: 400 9px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; }

/* Frame lineage diagram ----------------------------------------------- */

.case-diagram--branchline { border-top-color: #1e2a22; }
.dg--branchline .dg-frame rect { fill: rgb(116 155 128 / 1.5%); stroke: #29372e; }
.dg--branchline .dg-node rect { fill: #0c110e; stroke: #2d3d32; }
.dg--branchline .dg-node--accent rect,
.dg--branchline .dg-node--selected rect { fill: #111c15; stroke: #6f9279; }
.dg--branchline .dg-node--selected .dg-sub { fill: #8eb39a; }
.dg--branchline .dg-node--state rect { fill: #0a0e0b; stroke: #253129; }
.dg--branchline .dg-chip rect { fill: #101712; stroke: #34473a; }
.dg--branchline .dg-chip--soft rect { fill: transparent; stroke: #29372e; }
.dg--branchline .dg-label { fill: #65766b; }
.dg--branchline .dg-note { fill: #718076; }
.dg--branchline .dg-link path { stroke: #3b4d40; }
.dg--branchline .dg-link .dg-flow { stroke: #a8d1b2; opacity: .58; }
.dg--branchline .dg-arrow { stroke: #667c6c; }
.dg--branchline .dg-dot { fill: #657a6a; }

@media (max-width: 767px) {
  .project-case--branchline .case-hero__media { aspect-ratio: 1 / 1; }
  .project-case--branchline .case-hero__media img { object-position: center; }
  .exact-tabs { padding: 8px; }
  .exact-tabs em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .project-case--branchline * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}