/* "The vendor review, answered" (assets/art/gov-procurement.js): beside "What procurement will ask". */
.has-art-gov-procurement > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(31rem, 40vw, 38rem)); grid-template-rows: auto 1fr; column-gap: clamp(40px, 4.5vw, 88px); }
.has-art-gov-procurement > .container > .section-head { grid-column: 1; grid-row: 1; max-width: none; }
.has-art-gov-procurement > .container > .four-list { grid-column: 1; grid-row: 2; max-width: none; align-self: start; }
.has-art-gov-procurement > .container > .gp-stage { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--header, 64px) + 28px); }
.has-art-gov-procurement .four-list > li { outline: none; border-radius: 4px; transition: background-color 0.35s ease; }
.has-art-gov-procurement .four-list > li h3 { transition: color 0.35s ease; }
.has-art-gov-procurement .four-list > li.gp-lit h3 { color: var(--turquoise); }
.has-art-gov-procurement .four-list > li.gp-lit .num { border-color: var(--turquoise); background: var(--turquoise); color: var(--primary-ink); font-weight: 600; }
.has-art-gov-procurement .four-list > li:focus-visible { box-shadow: 0 0 0 2px var(--turquoise); }
@media (max-width: 900px) {
  .has-art-gov-procurement > .container { display: block; }
  .gp-stage { display: none; }
  .has-art-gov-procurement .four-list > li.gp-lit h3 { color: inherit; }
}

.gp-label { margin: 0 0 14px; font-size: 16.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquoise); }
.gp-card { position: relative; padding: 18px 22px 16px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--panel); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28); }
.gp-card p { margin: 0; }
.gp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.gp-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.gp-meta { font-size: 14px; color: var(--faint); white-space: nowrap; }

/* The four questions */
.gp-rows { display: grid; gap: 6px; margin: 12px 0 14px; }
.gp-row { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) 22px; align-items: center; column-gap: 12px; width: 100%; min-height: 42px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: border-color 0.3s, background-color 0.3s, color 0.3s; }
.gp-row:hover { border-color: var(--line-strong); color: var(--ink); }
.gp-row:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.gp-row.on { border-color: rgba(132, 181, 210, 0.55); background: rgba(132, 181, 210, 0.07); color: var(--ink); }
.gp-n { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 13px; color: var(--muted); }
.gp-row.on .gp-n { border-color: var(--turquoise); color: var(--turquoise); }
.gp-q { font-weight: 500; }
.gp-box { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; border: 1.5px solid var(--line-strong); }
.gp-box svg { width: 15px; height: 15px; fill: none; stroke: var(--primary-ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.4); transition: opacity 0.25s, transform 0.35s var(--ease); }
.gp-row.done .gp-box { border-color: var(--turquoise); background: var(--turquoise); }
.gp-row.done .gp-box svg { opacity: 1; transform: none; }
.gp-ans { position: absolute; right: 46px; top: 50%; padding: 2px 8px; border: 2px solid var(--turquoise); border-radius: 6px; color: var(--turquoise); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(132, 181, 210, 0.07); opacity: 0; transform: translateY(-50%) rotate(-5deg) scale(1.6); pointer-events: none; }
.gp-row.done .gp-ans { animation: gp-ans 0.45s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes gp-ans { 0% { opacity: 0; transform: translateY(-50%) rotate(-12deg) scale(1.8); } 65% { opacity: 1; transform: translateY(-50%) rotate(-4deg) scale(0.94); } 100% { opacity: 1; transform: translateY(-50%) rotate(-5deg) scale(1); } }
/* Soft glow until someone first uses the rows */
.gp-fresh .gp-row { animation: gp-glow 2.6s ease-in-out infinite; }
.gp-fresh .gp-row:nth-child(2) { animation-delay: 0.25s; } .gp-fresh .gp-row:nth-child(3) { animation-delay: 0.5s; } .gp-fresh .gp-row:nth-child(4) { animation-delay: 0.75s; }
@keyframes gp-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(132, 181, 210, 0); } 50% { box-shadow: 0 0 14px 1px rgba(132, 181, 210, 0.28); } }

/* The answer panel: one answer at a time, in a fixed space so nothing jumps */
.gp-panel { position: relative; height: 238px; border-radius: 12px; border: 1px solid var(--line); background: var(--ground); overflow: hidden; }
.gp-a { position: absolute; inset: 0; padding: 16px 18px; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.gp-a.play { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
/* Until the form is on screen, the answer's picture holds its first frame (gov-procurement.js removes .gp-wait) */
.gp-wait .gp-a.play * { animation-play-state: paused; }
.gp-big { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.gp-small { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.gp-tag { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.gp-tag svg, .gp-chip svg, .gp-asks b svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gp-ok { color: var(--turquoise); background: rgba(132, 181, 210, 0.1); }
.gp-wait { color: #d8b46f; border: 1px dashed rgba(216, 180, 111, 0.6); }

/* 1 Where it runs */
.gp-a1 { display: grid; grid-template-columns: 168px minmax(0, 1fr); column-gap: 20px; align-items: center; }
.gp-bldg { width: 168px; height: auto; display: block; }
.gp-roof, .gp-beam, .gp-col, .gp-step { fill: var(--raised); stroke: var(--line-strong); stroke-width: 1.2; }
.gp-rack > rect:first-child { fill: #10100f; stroke: var(--turquoise); stroke-width: 1.4; }
.gp-slot { fill: rgba(132, 181, 210, 0.14); }
.gp-led { fill: var(--turquoise); }
.gp-a1-text { display: grid; gap: 10px; justify-items: start; }
.gp-a1.play .gp-rack { animation: gp-rise 0.6s var(--ease) 0.15s both; }
.gp-a1.play .gp-led { animation: gp-blink 1.6s steps(2, jump-none) infinite; }
.gp-a1.play .gp-led.l2 { animation-delay: 0.4s; } .gp-a1.play .gp-led.l3 { animation-delay: 0.9s; }
.gp-a1.play .gp-a1-text > * { animation: gp-in 0.45s var(--ease) both; }
.gp-a1.play .gp-a1-text > :nth-child(2) { animation-delay: 0.35s; } .gp-a1.play .gp-a1-text > :nth-child(3) { animation-delay: 0.7s; }

/* 2 What the AI is allowed to do */
.gp-a2 { display: grid; align-content: start; gap: 10px; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 14px; color: var(--turquoise); background: rgba(132, 181, 210, 0.1); border: 1px solid rgba(132, 181, 210, 0.35); }
.gp-asks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gp-asks li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 6px 5px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-size: 14px; color: var(--ink); }
.gp-asks b { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #d8b46f; background: rgba(216, 180, 111, 0.1); white-space: nowrap; }
.gp-a2.play .gp-chip, .gp-a2.play .gp-asks li { animation: gp-in 0.4s var(--ease) both; animation-delay: calc(0.15s + var(--i) * 0.28s); }
.gp-a2.play .gp-asks b { animation: gp-pop 0.4s cubic-bezier(.3, .7, .3, 1.4) both; animation-delay: calc(0.45s + var(--i) * 0.28s); }

/* 3 What the record is */
.gp-a3 { display: grid; align-content: start; }
.gp-a3 > .gp-small { margin-bottom: 10px; }
.gp-chain { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr; align-items: center; }
.gp-blk { padding: 8px 6px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--panel); text-align: center; }
.gp-blk em { display: block; font-style: normal; font-size: 13px; color: var(--ink); }
.gp-blk code { display: block; margin-top: 3px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--turquoise); }
.gp-link { height: 2px; background: var(--turquoise); transform-origin: left; opacity: 0.8; }
.gp-back { display: block; width: 100%; height: 30px; margin-top: 2px; }
.gp-back path { fill: none; stroke: #d8b46f; stroke-width: 1.6; stroke-dasharray: 4 4; }
.gp-a3-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.gp-roll { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(216, 180, 111, 0.6); color: #d8b46f; font-size: 14px; font-weight: 600; }
.gp-roll svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gp-a3.play > .gp-small { animation: gp-fade 0.4s ease both; }
.gp-a3.play .gp-blk { animation: gp-in 0.4s var(--ease) both; animation-delay: calc(0.1s + var(--i) * 0.35s); }
.gp-a3.play .gp-link { animation: gp-grow 0.3s ease both; animation-delay: calc(0.4s + var(--i) * 0.35s); }
.gp-a3.play .gp-back path { animation: gp-fade 0.5s ease 2.1s both; }
.gp-a3.play .gp-last { animation: gp-in 0.4s var(--ease) 1.15s both, gp-dim 0.6s ease 2.5s both; }
.gp-a3.play .gp-a3-foot > :first-child { animation: gp-in 0.4s var(--ease) 1.6s both; }
.gp-a3.play .gp-roll { animation: gp-in 0.4s var(--ease) 1.9s both, gp-press 0.5s ease 2.4s; }

/* 4 Whose it is */
.gp-a4 { display: grid; align-content: start; gap: 16px; }
.gp-hand { display: grid; grid-template-columns: auto 44px auto; align-items: center; justify-content: start; column-gap: 12px; }
.gp-folder { display: grid; grid-template-columns: 48px auto; align-items: center; column-gap: 10px; row-gap: 8px; }
.gp-folder > .gp-tag { grid-column: 1 / -1; justify-self: start; }
.gp-folder > svg { width: 48px; height: 38px; }
.gp-folder > svg path { fill: rgba(132, 181, 210, 0.12); stroke: var(--turquoise); stroke-width: 1.8; stroke-linejoin: round; }
.gp-folder > svg .gp-code { fill: none; stroke-linecap: round; }
.gp-arrow { width: 44px; height: 18px; }
.gp-arrow path { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gp-next { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel); }
.gp-time { display: grid; gap: 8px; }
.gp-track { position: relative; height: 4px; margin: 6px 7px 0; border-radius: 2px; background: var(--line-strong); }
.gp-fill { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, var(--turquoise), #d8b46f); transform-origin: left; }
.gp-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ground); border: 2px solid var(--turquoise); }
.gp-dot.d1 { left: 0; } .gp-dot.d2 { left: 100%; border-color: #d8b46f; }
.gp-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--faint); }
.gp-a4.play .gp-folder { animation: gp-in 0.45s var(--ease) 0.1s both; }
.gp-a4.play .gp-arrow { animation: gp-slide 0.5s var(--ease) 0.6s both; }
.gp-a4.play .gp-next { animation: gp-in 0.45s var(--ease) 0.9s both; }
.gp-a4.play .gp-time { animation: gp-fade 0.4s ease 1.3s both; }
.gp-a4.play .gp-fill { animation: gp-grow 1.6s cubic-bezier(.4, 0, .2, 1) 1.6s both; }
.gp-a4.play .gp-dot.d2 { animation: gp-pop 0.4s cubic-bezier(.3, .7, .3, 1.4) 3.1s both; }

/* Footer and the approval stamp */
.gp-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 14px; min-height: 40px; }
.gp-count { font-size: 14px; color: var(--muted); }
.gp-count b { color: var(--turquoise); font-weight: 700; }
.gp-sign { transition: color 0.3s ease; min-width: 46%; padding-top: 4px; border-top: 1px solid var(--line-strong); font-size: 13px; color: var(--faint); }
.gp-stamp { position: absolute; right: 30px; bottom: 26px; padding: 7px 14px; border: 2.5px solid #d8b46f; border-radius: 8px; color: #d8b46f; background: rgba(32, 31, 29, 0.92); font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-7deg); opacity: 0; pointer-events: none; }
.gp-card.approved .gp-stamp { animation: gp-stamp 0.5s cubic-bezier(.3, .7, .3, 1) both; }
.gp-card.approved .gp-sign { color: transparent; }
.gp-card.approved { animation: gp-thud 0.3s ease 0.32s; }

@keyframes gp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes gp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gp-slide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes gp-pop { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes gp-blink { 0% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes gp-dim { to { opacity: 0.4; } }
@keyframes gp-press { 50% { background: rgba(216, 180, 111, 0.18); } }
@keyframes gp-stamp { 0% { opacity: 0; transform: rotate(-16deg) scale(1.9); } 65% { opacity: 1; transform: rotate(-6deg) scale(0.94); } 100% { opacity: 1; transform: rotate(-7deg) scale(1); } }
@keyframes gp-thud { 50% { transform: translateY(2px); } }

/* Reduced motion: the finished form, no movement */
@media (prefers-reduced-motion: reduce) {
  .gp-card *, .gp-card { animation: none !important; transition: none !important; }
  .gp-row.done .gp-ans, .gp-card.approved .gp-stamp { opacity: 1; }
  .gp-row.done .gp-ans { transform: translateY(-50%) rotate(-5deg); }
  .gp-a3 .gp-last { opacity: 0.4; }
}

/* Revision (Sam, October 25): each line shows its answer at the right; the "Answered" stamp sits between the question
   and the answer and follows the scroll; no check boxes. */
.gp-row { grid-template-columns: 26px auto minmax(0, 1fr) auto; }
.gp-mid { display: flex; justify-content: center; min-width: 0; }
.gp-ans { position: static; transform: rotate(-5deg) scale(1.6); white-space: nowrap; transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.3, .7, .3, 1); }
.gp-row.done .gp-ans { animation: none; opacity: 1; transform: rotate(-5deg) scale(1); }
.gp-short { justify-self: end; text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap; }
.gp-row.on .gp-short, .gp-row.done .gp-short { color: var(--turquoise); }
.gp-box { display: none; }

/* Each answer glows as it appears, so the eye goes to it (Sam, October 25). */
.gp-row.done { animation: gp-row-glow 2.4s ease-out; }
.gp-row.done .gp-short { animation: gp-shine 2.4s ease-out; }
@keyframes gp-row-glow {
  0% { box-shadow: 0 0 0 0 rgba(132, 181, 210, 0); }
  20% { box-shadow: 0 0 0 2px rgba(132, 181, 210, 0.75), 0 0 22px 4px rgba(132, 181, 210, 0.35); border-color: var(--turquoise); }
  100% { box-shadow: 0 0 0 0 rgba(132, 181, 210, 0); }
}
@keyframes gp-shine {
  0% { text-shadow: none; }
  20% { color: #fff; text-shadow: 0 0 10px rgba(132, 181, 210, 0.95), 0 0 22px rgba(132, 181, 210, 0.6); }
  100% { text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .gp-row.done, .gp-row.done .gp-short { animation: none; } .gp-row.done .gp-short { text-shadow: 0 0 10px rgba(132, 181, 210, 0.5); } }
/* Answers not yet reached stay dim, so each one visibly appears. */
.gp-short { opacity: 0.35; transition: opacity 0.4s ease, color 0.4s ease; }
.gp-row.done .gp-short, .gp-row.on .gp-short { opacity: 1; }