/* Change Order Management --------------------------------------------------
   Page-specific components. Shared case study vocabulary is in case-study.css.
-------------------------------------------------------------------------- */

/* Demo frames. The hero is taller; the inline ones come in two heights. */
.co-demo {
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
}
.co-demo--hero { height:min(1140px, 96vh); }
.co-demo--82   { height:min(860px, 82vh); }
.co-demo--84   { height:min(880px, 84vh); }
.co-demo iframe { display:block; width:100%; height:100%; border:none; }

/* What a change order is: scope + change order --------------------------- */

.co-scope {
  width:fit-content;
  max-width:100%;
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
  padding:30px;
}
.co-scope__inner { width:330px; max-width:100%; }
.co-scope__top { display:flex; justify-content:center; }
.co-scope__pill {
  display:flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 20px;
  border-radius:8px;
  background:#F4F4F2;
  box-shadow:inset 0 0 0 1px #DADAD5;
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:14px;
  color:#1B302A;
}
/* The connector is one element that physically reaches both boxes. */
.co-scope__conn { position:relative; height:44px; }
.co-scope__line {
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  border-left:1.4px solid #DADAD5;
}
.co-scope__box {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px 16px 20px;
  border-radius:12px;
  border:1.4px dashed #8B9A94;
}
.co-scope__label {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#1B302A;
  text-align:center;
}
.co-scope__ops { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.co-scope__op {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:74px;
  border-radius:10px;
  background:#F4F4F2;
  box-shadow:inset 0 0 0 1px #DADAD5;
}
.co-scope__opicon { display:flex; color:#1B302A; }
.co-scope__opname {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:13.5px;
  color:#1B302A;
}

/* What they cost: three stats --------------------------------------------- */

.co-stats {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px 0;
  padding:16px 0 6px;
}
.co-stat { display:flex; flex-direction:column; gap:8px; }
.co-stat--1 { padding:0 22px 0 0; }
.co-stat--2 { padding:0 22px; border-left:1px solid #E9E9E6; }
.co-stat--3 { padding:0 0 0 22px; border-left:1px solid #E9E9E6; }
.co-stat__n {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:clamp(30px, 4vw, 40px);
  line-height:1;
  letter-spacing:-0.02em;
  color:#1B302A;
}
.co-stat__t { font-size:14.5px; line-height:1.5; color:#647670; }

/* Impact: the five surfaces ----------------------------------------------- */

.co-surfaces {
  width:452px;
  max-width:100%;
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.co-surface {
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 16px;
  border-radius:10px;
}
/* Apricot is the third-party vendor surface, mint the internal ones, lilac
   the owner's. The hues carry the same meaning as everywhere else. */
.co-surface--apricot { background:#FBF1E4; box-shadow:inset 0 0 0 1px #EFD9B6; }
.co-surface--mint    { background:#EEF8F3; box-shadow:inset 0 0 0 1px #C9E9D9; }
.co-surface--lilac   { background:#F4F2FB; box-shadow:inset 0 0 0 1px #E4E1EE; }
.co-surface__icon {
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
}
.co-surface__name { font-size:16px; font-weight:400; color:#1B302A; }

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1040px) {
  [data-fillstack] { width:100% !important; box-sizing:border-box !important; }
  [data-fillstack] > div { width:100% !important; box-sizing:border-box !important; }
  [data-cols3][data-tight] { grid-template-columns:minmax(0, 1fr) !important; }
  [data-bulkpair] { padding-top:22px !important; padding-bottom:34px !important; }
  [data-pair] > div[aria-hidden="true"] { padding:4px 0 !important; }
  [data-pair][data-cap]:not([data-visual-first]) > *:last-child { width:100% !important; max-width:560px !important; margin:0 auto !important; }
  [data-pair][data-cap][data-visual-first] > *:first-child { width:100% !important; max-width:560px !important; margin:0 auto !important; }
}

@media (max-width: 860px) {
  [data-cols3][data-tight] { gap:16px !important; }
  [data-cols3][data-rowrule] { gap:28px !important; }
  [data-cols3][data-rowrule] > *:not(:first-child) { padding-top:28px !important; border-top:1px solid #E9E9E6 !important; }
  [data-cols3][data-rowrule] > *:first-child { padding-top:0 !important; border-top:none !important; }
  [data-statrow] > * { padding:0 !important; border-left:none !important; }
}

@media (max-width: 700px) {
  [data-matrix-box] { display:none !important; }
}

/* Concept definition: four numbered prompts -------------------------------- */

.co-concepts {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  padding-top:6px;
}
.co-concept {
  display:grid;
  grid-template-columns:28px minmax(0, 1fr);
  column-gap:14px;
  align-items:start;
  padding:22px 24px;
  border-radius:12px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E4E1EE, 0 8px 22px rgba(27, 48, 42, 0.10);
}
.co-concept__n {
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:99px;
  background:#F4F2FB;
  box-shadow:inset 0 0 0 1px #E4E1EE;
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:14px;
  color:#6B5BA8;
}
.co-concept__t {
  font-size:16px;
  line-height:1.55;
  color:#4E625B;
  font-weight:300;
  padding-top:4px;
}

/* A white panel that holds a diagram ---------------------------------------- */

.co-panel {
  width:fit-content;
  max-width:100%;
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E4E1EE, 0 8px 22px rgba(27, 48, 42, 0.10);
  padding:32px;
}
.co-panel > svg { display:block; max-width:100%; margin:0 auto; }

/* Store everything, show what's needed: the visibility matrix -------------- */

.co-matrix {
  margin-top:48px;
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E4E1EE, 0 8px 22px rgba(27, 48, 42, 0.10);
  padding:clamp(20px, 2vw, 28px);
  overflow-x:auto;
}
.co-matrix__inner { min-width:700px; }
.co-matrix__grid {
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) repeat(5, minmax(0, 1fr));
  row-gap:10px;
  align-items:center;
}
.co-matrix__col {
  text-align:center;
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:15px;
  color:#647670;
}
.co-matrix__row {
  padding:13px 18px;
  border-radius:10px;
  background:#F4F4F2;
  font-size:15px;
  line-height:1.4;
  color:#1B302A;
}
.co-matrix__cell { display:flex; justify-content:center; }
.co-matrix__yes {
  width:18px;
  height:18px;
  border-radius:99px;
  background:#0E7A55;
}
.co-matrix__no {
  width:18px;
  height:1.4px;
  border-radius:99px;
  background:#DADAD5;
}

.co-matrix__legend {
  display:flex;
  align-items:center;
  gap:22px;
  padding-top:18px;
  margin-top:22px;
  border-top:1px solid #EFEDF7;
}
.co-matrix__key {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  color:#647670;
}
.co-matrix__legend .co-matrix__yes { flex:0 0 auto; width:14px; height:14px; }
.co-matrix__legend .co-matrix__no { flex:0 0 auto; width:14px; }

/* Designing the object: one change order across two work orders ----------- */

.co-object {
  width:472px;
  max-width:100%;
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
  padding:28px;
}
.co-object__head { display:flex; align-items:center; gap:9px; padding-bottom:18px; }
.co-object__label {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#647670;
}
.co-object__rule { flex:1; height:1px; background:#E9E9E6; }
.co-object__co {
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 13px;
  border-radius:8px;
  background:#FBF1E4;
  box-shadow:inset 0 0 0 1px #EFD9B6;
  margin-bottom:16px;
}
.co-object__coname {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:12.5px;
  color:#8F6224;
}
.co-object__cometa { margin-left:auto; font-size:11.5px; color:#647670; }
.co-object__wos { display:flex; gap:12px; align-items:flex-start; }
.co-object__wo {
  flex:1;
  min-width:0;
  border-radius:8px;
  background:#FBFBFA;
  box-shadow:inset 0 0 0 1px #EDEDEA;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.co-object__wolabel {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#647670;
  padding-bottom:2px;
}
.co-object__item {
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border-radius:6px;
  background:#FFFFFF;
  box-shadow:inset 0 0 0 1px #EDEDEA;
}
/* Apricot marks the items this change order touches. */
.co-object__item--affected {
  background:#FBF1E4;
  box-shadow:inset 0 0 0 1px #EFD9B6;
}
.co-object__itemname {
  flex:1;
  min-width:0;
  font-size:11.5px;
  color:#647670;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.co-object__item--affected .co-object__itemname { color:#8F6224; }
.co-object__key {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #E9E9E6;
}
.co-object__swatch {
  flex:none;
  width:12px;
  height:12px;
  border-radius:4px;
  background:#FBF1E4;
  box-shadow:inset 0 0 0 1px #EFD9B6;
}
.co-object__keytext { font-size:12px; color:#647670; }

/* The lifecycle ------------------------------------------------------------ */

.co-lifecycle {
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
  padding:clamp(20px, 2.4vw, 32px);
}
.co-lifecycle img {
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
}

/* product-ui */
/* Recreation of Roofstock's vendor line-item and change-order lists. Their
   brand colours, fenced off from this site's palette by these markers. */

.p-vlist {
  max-width:none;
  display:flex;
  flex-direction:column;
  gap:16px;
  font-family:'Figtree', sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.p-vcard {
  border-radius:12px;
  border:1px solid #EDEDED;
  background:#FFFFFF;
  padding:0 20px 5px;
  box-shadow:0 8px 22px rgba(27, 48, 42, 0.06);
}
.p-vcard__head {
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 -20px;
  padding:16px 20px 13px;
  border-bottom:1px solid #EDEDED;
}
.p-vcard__head--co { gap:10px; }
.p-vcard__title { font-size:14.5px; font-weight:600; }
.p-vcard__count { font-weight:400; color:#71767B; }

.p-vgroup {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 -20px;
  padding:10px 20px;
  background:#FAFAFA;
}
.p-vgroup--spaced { margin:4px -20px 0; }
.p-vgroup__label {
  font-size:11px;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#71767B;
}

.p-vrow-wrap--ruled { border-top:1px solid #F4F4F4; }
.p-vrow {
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:46px;
  padding:13px 20px 13px 32px;
  margin:0 -20px;
}
.p-vrow--co { padding:13px 20px; }
.p-vrow__name {
  flex:1;
  min-width:0;
  font-size:13.5px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.p-vrow__name--co { font-weight:400; }
.p-vrow__verb { color:#5C6166; }
.p-vrow__strong { font-weight:600; }

.p-badge {
  flex:none;
  padding:3px 9px;
  border-radius:6px;
  font-size:11.5px;
  font-weight:500;
  line-height:1.5;
  white-space:nowrap;
}
.p-badge--co         { background:#FDF4DC; color:#7A5807; }
.p-badge--incomplete { background:#FDF0EF; color:#E1152D; }
.p-badge--verified   { background:#EEF8F3; color:#1C7A54; }

.p-vchev { flex:none; display:flex; color:#8A8F94; }
.p-vco-head {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 -20px;
  padding:10px 20px;
  background:#FDF4DC;
}
.p-vco-head__label {
  font-size:11px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#7A5807;
}
.p-vamount {
  flex:none;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  color:#17181A;
}
/* /product-ui */

/* The resolved vendor view: a non-interactive frame ------------------------ */

.co-vendorui {
  position:relative;
  height:min(760px, 76vh);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
  background:#FFFFFF;
}
.co-vendorui iframe {
  display:block;
  width:100%;
  height:100%;
  border:none;
  pointer-events:none;
}

/* Routing by threshold ----------------------------------------------------- */

.co-route {
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
  padding:clamp(10px, 1.1vw, 14px);
}
.co-route__inner {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:16px 14px;
}
.co-route__node {
  padding:12px 14px;
  border-radius:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:3px;
}
.co-route__node--apricot { background:#FBF1E4; box-shadow:inset 0 0 0 1px #EFD9B6; }
.co-route__node--mint    { background:#EEF8F3; box-shadow:inset 0 0 0 1px #C9E9D9; }
.co-route__node--lilac   { background:#F4F2FB; box-shadow:inset 0 0 0 1px #E4E1EE; }
.co-route__name {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:14px;
}
.co-route__node--apricot .co-route__name { color:#8F6224; }
.co-route__node--mint .co-route__name { color:#0E7A55; }
.co-route__node--lilac .co-route__name { color:#6B5BA8; }
.co-route__sub { font-size:11.5px; color:#4E625B; }
.co-route__arrow { display:flex; justify-content:center; color:#647670; }

/* The split. Every connector physically reaches the box it connects to. */
.co-route__split {
  position:relative;
  height:50px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:10px;
}
.co-route__stem {
  position:absolute;
  left:50%;
  top:0;
  height:24px;
  border-left:1.4px solid #DADAD5;
}
.co-route__leg { position:relative; }
.co-route__leg--left { grid-column:1; }
.co-route__leg--right { grid-column:2; }
.co-route__cross {
  position:absolute;
  left:50%;
  top:24px;
  width:calc(100% + 10px);
  border-top:1.4px solid #DADAD5;
}
.co-route__drop {
  position:absolute;
  left:50%;
  top:24px;
  height:26px;
  border-left:1.4px solid #DADAD5;
}
.co-route__cap {
  position:absolute;
  left:50%;
  top:21px;
  transform:translate(-50%, 0);
  background:#FFFFFF;
  padding:0 8px;
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#566661;
  /* Centred on its own hairline and never broken: the rule it sits on is the
     owner's approval threshold, and the label wrapping reads as two rows. */
  text-align:center;
  white-space:nowrap;
}
.co-route__pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.co-route__owner { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
.co-route__ownercol { display:flex; flex-direction:column; gap:8px; }

/* Targets and the before/after card ---------------------------------------- */

.co-tlist { display:flex; flex-direction:column; gap:26px; padding-top:0; }
.co-tlist__item { display:flex; flex-direction:column; gap:9px; }
.co-tlist__item--ruled { padding-top:26px; border-top:1px solid #E4E1EE; }
.co-tlist__label {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#647670;
}
.co-tlist__text {
  font-size:clamp(16px, 1.6vw, 18px);
  line-height:1.6;
  color:#1B302A;
  font-weight:300;
  text-wrap:pretty;
}

.co-ba {
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
  padding:clamp(18px, 1.8vw, 24px);
}
.co-ba__stack { display:flex; flex-direction:column; gap:8px; }
.co-ba__label {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#566661;
}
.co-ba__label--after { padding-top:20px; }
.co-ba__before { display:flex; flex-direction:column; gap:10px; }
.co-ba__row { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.co-ba__chan {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:13px 8px;
  border-radius:10px;
  background:#FBFBFA;
  box-shadow:inset 0 0 0 1px #EDEDEA;
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:13.5px;
  color:#1B302A;
}
.co-ba__rec {
  border-radius:10px;
  background:#FFFFFF;
  border:1px solid #E9E9E6;
  overflow:hidden;
}
.co-ba__rechead {
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 14px;
  background:#EEF8F3;
}
.co-ba__recname {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:13px;
  color:#0E7A55;
}
.co-ba__recid {
  margin-left:auto;
  font-family:'Figtree', sans-serif;
  font-size:11.5px;
  color:#4E625B;
}
.co-ba__field { display:flex; align-items:center; gap:10px; padding:9px 14px; }
.co-ba__field--ruled { border-top:1px solid #F0F0EE; }
.co-ba__field svg { flex:none; }
.co-ba__fieldname { font-size:13px; line-height:1.5; color:#1B302A; }