/* ==================================================================
   BUILD PLAN: the blueprint frames a page build draws before its sections
   exist. Its own file because two documents use it: the app's skeleton, and
   the page frame itself, which takes these rules into a shadow root once the
   page's body opens (COM-635). One copy, so the two always look the same.
   ================================================================== */

/* --- build mode: the blueprint pass --- */
/* A clone paints the solid skeleton above because it measured a real page. A build has
   seen nothing yet, so painting solid blocks would be asserting a layout we haven't
   chosen. These frames say "planned, not built": graph paper, dashed rules, a name
   pencilled in the margin. Each one is REPLACED by its .cps-block sibling above the
   moment that section's HTML lands, so the pane converts top-down as the agent writes. */
.cps-skeleton.is-blueprint { --sk-bg: #fdfdfb; }
.cps-block.blueprint {
  position: relative;
  display: block;
  min-height: var(--bp-h, 200px);
  padding: 26px 34px;
  border-bottom: 1px dashed rgba(87, 130, 146, 0.25);
  background:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(93, 132, 146, 0.08) 23px 24px);
  opacity: 0;
  animation: cps-bp-rise 420ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--bp-stagger, 0ms);
}
/* the section's name, pencilled in the margin */
.cps-block.blueprint::after {
  content: attr(data-label);
  position: absolute;
  right: 16px;
  bottom: 10px;
  color: rgba(66, 111, 130, 0.58);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cps-frame {
  display: grid;
  width: 100%;
  height: calc(var(--bp-h, 200px) - 52px);
  padding: 18px;
  gap: 9px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  border: 1.5px dashed rgba(69, 117, 138, 0.48);
  /* uneven corners and a fraction of a degree off true: drawn, not printed */
  border-radius: 3px 8px 4px 6px;
  transform: rotate(var(--bp-tilt, 0deg));
}
.cps-frame > span {
  border: 1px dashed rgba(69, 117, 138, 0.36);
  background: rgba(105, 151, 168, 0.06);
}
.cps-frame > .line { height: 7px; align-self: center; border-width: 0 0 1px; }
.cps-frame > .circle { aspect-ratio: 1; align-self: center; border-radius: 50%; }

/* per-section plans: which cells the frame's parts occupy */
.p-hero .a { grid-area: 1 / 1 / 2 / 6; }
.p-hero .b { grid-area: 2 / 1 / 4 / 7; }
.p-hero .c { grid-area: 4 / 1 / 5 / 6; }
.p-hero .d { grid-area: 1 / 8 / 7 / 13; border-radius: 48%; }
.p-trust .cps-frame { grid-template-rows: 1fr; align-items: center; }
.p-trust .a { grid-column: 1 / 4; }
.p-trust .b { grid-column: 5 / 8; }
.p-trust .c { grid-column: 9 / 13; }
.p-problem .a { grid-area: 1 / 1 / 7 / 6; border-radius: 50%; }
.p-problem .b { grid-area: 1 / 7 / 2 / 13; }
.p-problem .c { grid-area: 2 / 7 / 4 / 13; }
.p-problem .d { grid-area: 4 / 7 / 6 / 12; }
.p-benefits .a { grid-area: 1 / 3 / 2 / 11; }
.p-benefits .b { grid-area: 2 / 1 / 7 / 5; }
.p-benefits .c { grid-area: 2 / 5 / 7 / 9; }
.p-benefits .d { grid-area: 2 / 9 / 7 / 13; }
.p-quote .a, .p-final .a { grid-area: 1 / 2 / 3 / 12; }
.p-quote .b, .p-final .b { grid-area: 4 / 4 / 5 / 10; }

/* The copy lands on the plan (COM-635). The frame keeps its dashed edge and
   its name in the margin, and the section's real words are pencilled inside,
   in the same blue as the rules, so it still reads as a plan, not a page. */
.cps-frame.is-words {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 28px;
  height: auto;
  min-height: calc(var(--bp-h, 200px) - 52px);
  color: rgba(38, 78, 96, 0.92);
  font-family: 'Kalam', cursive;
}
.bp-kicker {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(66, 111, 130, 0.62);
}
.bp-head { font-size: 22px; line-height: 1.15; max-width: 30ch; text-wrap: balance; }
.bp-sub { font-size: 16px; line-height: 1.2; max-width: 40ch; margin-top: 4px; }
.bp-line {
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.3;
  color: rgba(38, 78, 96, 0.72);
  /* a long paragraph is a plan's worth of it: two lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.bp-button {
  margin-top: 4px;
  padding: 2px 14px;
  border: 1.5px dashed rgba(69, 117, 138, 0.6);
  border-radius: 999px;
  font-size: 14px;
}
/* Words write themselves in, left to right, like a pencil. */
.bp-write { animation: bp-write 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes bp-write {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
/* An edit to the copy. The old line is struck through in pencil and the new
   one is written under it, so the founder sees the copy being tightened. The
   stroke is drawn per line, so an old line that wraps is struck on each. */
.bp-was {
  color: rgba(38, 78, 96, 0.45);
  background: linear-gradient(rgba(176, 72, 52, 0.75), rgba(176, 72, 52, 0.75)) no-repeat 0 54% / 100% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: bp-strike 420ms ease-out both;
}
@keyframes bp-strike { from { background-size: 0% 2px; } to { background-size: 100% 2px; } }
.bp-now { display: block; margin-top: 2px; color: rgba(38, 78, 96, 0.95); }
/* A two-line clamp would hide the new line under a struck one. */
.bp-line:has(.bp-was) { display: block; }

/* a frame giving way to the written section */
.cps-block.lands { animation: cps-bp-land 380ms cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes cps-bp-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cps-bp-land {
  from { opacity: 0.35; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cps-block.blueprint { opacity: 1; animation: none; }
  .cps-block.lands { animation: none; }
  .bp-write, .bp-was { animation: none; }
}

/* Frames handed to the page frame have already risen in the skeleton, so they
   arrive standing rather than rising a second time. */
.cps-block.blueprint.is-steady { opacity: 1; animation: none; }
.cps-plan { --sk-bg: #fdfdfb; display: block; background: var(--sk-bg); }