/* Strategy & Architecture page: builds on optimisation.css and sentinel.css (shared .opt-page sections). */

/* Target architecture: scattered tools settle into layers, overlaps fall away */
.opt-page .ta-state {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 4px;
  font: 600 12px var(--ui-ms);
}
.opt-page .ta-today {
  color: var(--bad);
  transition: opacity 0.3s var(--ease);
}
.opt-page .ta-target {
  color: var(--go);
  background: var(--go-bg);
  border: 1px solid var(--go-line);
  border-radius: 999px;
  padding: 1px 9px;
  opacity: 0.15;
  transition: opacity 0.3s var(--ease);
}
.opt-page .ta.go .ta-today {
  opacity: 0.35;
  text-decoration: line-through;
}
.opt-page .ta.go .ta-target {
  opacity: 1;
  transition-delay: 1.6s;
}
.opt-page .ta-stack {
  display: grid;
  gap: 8px;
  padding: 10px 16px 12px;
  position: relative;
}
.opt-page .ta-layer {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px dashed #d6d2c9;
  background: #faf9f6;
  transition:
    border-color 0.3s var(--ease),
    background 0.3s var(--ease);
}
.opt-page .ta.go .ta-layer {
  border: 1px solid var(--go-line);
  background: #f3fcf6;
  transition-delay: 1.2s;
}
.opt-page .ta-layer > b {
  font: 700 12.5px "Sora";
}
.opt-page .ta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.opt-page .ta-chip {
  font: 600 11.5px var(--ui-ms);
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e1dfdd;
  box-shadow: 0 3px 8px -5px rgba(60, 35, 10, 0.45);
  transform: translate(var(--x), var(--y)) rotate(-4deg);
  transition:
    transform 0.7s var(--ease),
    opacity 0.4s var(--ease),
    background 0.3s var(--ease),
    color 0.3s var(--ease);
}
.opt-page .ta-chip.retire {
  background: var(--bad-bg);
  border-color: #f2c4c8;
  color: var(--bad);
}
.opt-page .ta.go .ta-chip {
  transform: none;
}
.opt-page .ta.go .ta-chip.keep {
  background: var(--go-bg);
  border-color: var(--go-line);
  color: var(--go);
  transition-delay: 0s, 0s, 1.2s, 1.2s;
}
.opt-page .ta.go .ta-chip.retire {
  opacity: 0.35;
  text-decoration: line-through;
  transition-delay: 0s, 0.9s, 0s, 0s;
}

/* Roadmap bars draw in row by row, milestones pop in */
.opt-page .svc-roadmap.rm-ready .svc-roadmap-track > span {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease);
}
.opt-page .svc-roadmap.rm-ready .svc-milestones > span {
  transform: scale(0.6);
  opacity: 0;
  transition:
    transform 0.3s var(--ease),
    opacity 0.3s var(--ease);
}
.opt-page .svc-roadmap.rm-ready.go .svc-roadmap-track > span {
  transform: none;
}
.opt-page .svc-roadmap.rm-ready.go .svc-milestones > span {
  transform: none;
  opacity: 1;
}
.opt-page .svc-roadmap.go .svc-roadmap-row:nth-child(2) .svc-roadmap-track > span {
  transition-delay: 0.1s;
}
.opt-page .svc-roadmap.go .svc-roadmap-row:nth-child(3) .svc-roadmap-track > span {
  transition-delay: 0.45s;
}
.opt-page .svc-roadmap.go .svc-roadmap-row:nth-child(4) .svc-roadmap-track > span {
  transition-delay: 0.8s;
}
.opt-page .svc-roadmap.go .svc-roadmap-row:nth-child(5) .svc-roadmap-track > span {
  transition-delay: 1.15s;
}
.opt-page .svc-roadmap.go .svc-roadmap-row:nth-child(6) .svc-roadmap-track > span {
  transition-delay: 1.5s;
}
.opt-page .svc-roadmap.go .svc-milestones > span:nth-child(1) {
  transition-delay: 2s;
}
.opt-page .svc-roadmap.go .svc-milestones > span:nth-child(2) {
  transition-delay: 2.3s;
}
.opt-page .svc-roadmap.go .svc-milestones > span:nth-child(3) {
  transition-delay: 2.6s;
}
.opt-page .svc-roadmap {
  background: #fff;
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgba(26, 26, 28, 0.05),
    0 16px 32px -14px rgba(60, 35, 10, 0.22);
}

/* Controls ranked: bars grow, the vendor pitch gets a clear No */
.opt-page .cr-head,
.opt-page .cr {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 40px 40px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  font: 12px var(--ui-ms);
}
.opt-page .cr-head {
  padding-top: 10px;
  padding-bottom: 6px;
  font-size: 10.5px;
  color: #616161;
  font-weight: 600;
}
.opt-page .cr {
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 1px solid #f3f2f1;
}
.opt-page .cr b {
  display: block;
  font-weight: 600;
}
.opt-page .cr small {
  color: #616161;
  font-size: 10.5px;
}
.opt-page .cr i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #ece9e2;
  position: relative;
  overflow: hidden;
}
.opt-page .cr i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--go-fill);
  transition: width 0.8s var(--ease);
}
.opt-page [data-mock="rank"].go .cr i::after {
  width: var(--w);
}
.opt-page [data-mock="rank"].go .cr:nth-child(2) i::after {
  transition-delay: 0.15s;
}
.opt-page [data-mock="rank"].go .cr:nth-child(3) i::after {
  transition-delay: 0.3s;
}
.opt-page [data-mock="rank"].go .cr:nth-child(4) i::after {
  transition-delay: 0.45s;
}
.opt-page [data-mock="rank"].go .cr:nth-child(5) i::after {
  transition-delay: 0.6s;
  background: #c9c4ba;
}
.opt-page .cr em {
  font-style: normal;
  font: 700 11px "JetBrains Mono";
}
.opt-page .cr strong {
  justify-self: start;
  font: 700 10.5px "JetBrains Mono";
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--go-bg);
  color: var(--go);
}
.opt-page .cr.no strong {
  background: var(--bad-bg);
  color: var(--bad);
  opacity: 0;
  transform: scale(1.8) rotate(-8deg);
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.opt-page [data-mock="rank"].done .cr.no strong {
  opacity: 1;
  transform: none;
}

/* Renewal plan month labels */
.opt-page .mon {
  display: inline-block;
  width: 34px;
  font: 700 10.5px "JetBrains Mono";
  color: var(--orange-text);
}

/* Decision log: each decision flips from Proposed to Agreed */
.opt-page .adr-list {
  display: grid;
  gap: 8px;
  padding: 12px 16px 6px;
}
.opt-page .adr {
  border: 1px solid #e9e7e4;
  border-radius: 8px;
  padding: 10px 12px;
  font: 12px var(--ui-ms);
  background: #fff;
  transition:
    border-color 0.3s var(--ease),
    background 0.3s var(--ease);
}
.opt-page .adr-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.opt-page .adr-top b {
  font-weight: 600;
}
.opt-page .adr p {
  margin: 4px 0 4px;
  color: #424242;
  font-size: 11.5px;
}
.opt-page .adr small {
  color: #616161;
  font-size: 10.5px;
}
.opt-page .adr-st {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: #fff4ce;
  color: #6b4b00;
}
.opt-page .adr-st::after {
  content: "Proposed";
}
.opt-page .adr.hp-done {
  border-color: var(--go-line);
  background: #f6fdf8;
}
.opt-page .adr.hp-done .adr-st {
  background: var(--go-bg);
  color: var(--go);
  border: 1px solid var(--go-line);
  animation: opt-pop 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.opt-page .adr.hp-done .adr-st::after {
  content: "✓ Agreed";
}

@media (max-width: 960px) {
  .opt-page.strategy-page .pa-band {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .opt-page .ta-layer {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .opt-page .cr-head,
  .opt-page .cr {
    grid-template-columns: minmax(0, 1fr) 70px 34px 34px;
    gap: 6px;
    padding-inline: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .opt-page .ta-chip,
  .opt-page .ta-layer,
  .opt-page .svc-roadmap-track > span,
  .opt-page .svc-milestones > span,
  .opt-page .cr i::after,
  .opt-page .cr strong,
  .opt-page .adr,
  .opt-page .adr-st {
    transition: none !important;
    animation: none !important;
  }
}
@media (max-width: 760px) {
  .opt-page .ta-chip {
    transform: translate(calc(var(--x) * 0.3), calc(var(--y) * 0.3)) rotate(-3deg);
  }
}