/* ==========================================================================
   KULIC Advisory - Procurement Operating Model Design pillar
   Wave 139. Scoped to .pom so nothing leaks into the rest of the estate.
   Deep navy and black, white type, gold for the decision, controlled cyan
   for system and data, controlled red only where something is critical.
   ========================================================================== */
.pom { --pom-line: rgba(226, 237, 252, .12); --pom-gold: #e6b84f; --pom-cyan: #5fd2f0; }
.pom h2 { margin: 0 0 .75rem; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.2; letter-spacing: -.015em; }
.pom > p { max-width: 78ch; line-height: 1.72; }
.pom .eyebrow { margin-bottom: .45rem; }
.pom-punch { margin-top: 1.15rem; padding-left: 1rem; border-left: 2px solid var(--pom-gold); max-width: 78ch; line-height: 1.7; }

/* two confusions, one answer */
.pom-contrast { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; margin-top: 1.3rem; }
.pom-contrast article { padding: 1.05rem 1.15rem; border: 1px solid var(--pom-line); border-radius: var(--ka-r-md, 10px); background: linear-gradient(180deg, rgba(10, 18, 30, .72), rgba(6, 12, 22, .72)); }
.pom-contrast article p { margin: .5rem 0 0; font-size: .93rem; line-height: 1.62; }
.pom-contrast__answer { border-color: rgba(230, 184, 79, .42); }
.pom-tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(226, 237, 252, .62); }
.pom-tag--gold { color: var(--pom-gold); }

/* the eight components */
.pom-eight { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; margin: 1.4rem 0 0; }
.pom-eight__item { display: grid; grid-template-rows: auto auto 1fr; gap: .3rem; padding: .95rem 1rem 1.05rem; border: 1px solid var(--pom-line); border-radius: var(--ka-r-md, 10px); background: linear-gradient(180deg, rgba(10, 18, 30, .78), rgba(6, 12, 22, .78)); position: relative; overflow: hidden; }
.pom-eight__item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(180deg, rgba(230, 184, 79, .55), rgba(95, 210, 240, .35)); }
.pom-eight__n { font-family: "Space Grotesk", sans-serif; font-size: .7rem; letter-spacing: .12em; color: rgba(230, 184, 79, .8); }
.pom-eight__item strong { font-size: .97rem; line-height: 1.28; }
.pom-eight__item > span:last-child { font-size: .86rem; line-height: 1.55; color: rgba(226, 237, 252, .74); }
.pom-eight__seam { margin-top: 1.1rem; padding-top: .95rem; border-top: 1px solid var(--pom-line); max-width: 82ch; font-size: .93rem; line-height: 1.7; color: rgba(226, 237, 252, .8); }

/* four shapes */
.pom-shapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.pom-shapes article { display: grid; gap: .4rem; align-content: start; padding: 1rem 1.05rem; border: 1px solid var(--pom-line); border-radius: var(--ka-r-md, 10px); background: rgba(9, 16, 28, .6); }
.pom-shapes article strong { font-size: .98rem; }
.pom-shapes__t { font-size: .85rem; color: var(--pom-cyan); line-height: 1.45; }
.pom-shapes__f { font-size: .85rem; color: rgba(226, 237, 252, .62); line-height: 1.45; }

/* where it breaks - controlled red, this is the critical signal */
.pom-breaks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .55rem; max-width: 88ch; }
.pom-breaks li { position: relative; padding: .72rem .95rem .72rem 2.1rem; border: 1px solid var(--pom-line); border-radius: var(--ka-r-sm, 6px); background: rgba(9, 16, 28, .5); font-size: .93rem; line-height: 1.55; }
.pom-breaks li::before { content: ""; position: absolute; left: .95rem; top: 1.12rem; width: 6px; height: 6px; border-radius: 50%; background: #d9534f; box-shadow: 0 0 8px rgba(217, 83, 79, .6); }

/* decision rights, interactive */
.pom-dr { margin-top: 1.3rem; border: 1px solid var(--pom-line); border-radius: var(--ka-r-lg, 14px); background: linear-gradient(180deg, rgba(10, 18, 30, .82), rgba(6, 12, 22, .82)); overflow: hidden; }
.pom-dr__tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--pom-line); }
.pom-dr__tabs button { flex: 1 1 auto; min-height: 46px; padding: .7rem 1rem; border: 0; border-right: 1px solid var(--pom-line); background: transparent; color: rgba(226, 237, 252, .68); font: inherit; font-size: .84rem; letter-spacing: .01em; cursor: pointer; transition: background .18s ease, color .18s ease; }
.pom-dr__tabs button:last-child { border-right: 0; }
.pom-dr__tabs button:hover { color: #fff; background: rgba(230, 184, 79, .07); }
.pom-dr__tabs button[aria-selected="true"] { color: #0a1120; background: var(--pom-gold); font-weight: 600; }
.pom-dr__tabs button:focus-visible { outline: 2px solid var(--pom-cyan); outline-offset: -2px; }
/* all four panels share one grid cell, so the box is exactly as tall as the
   tallest one: no layout shift on switch, and no reserved dark void */
.pom-dr__panels { display: grid; padding: 1.15rem 1.25rem 1.3rem; }
.pom-dr__panel { grid-area: 1 / 1; }
.pom-dr__panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.pom-dr__case { margin: 0 0 .9rem; font-size: .88rem; letter-spacing: .01em; color: var(--pom-cyan); }
.pom-dr dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; margin: 0; }
.pom-dr dl > div { padding-top: .7rem; border-top: 1px solid var(--pom-line); }
.pom-dr dt { margin-bottom: .32rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(230, 184, 79, .85); }
.pom-dr dd { margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(226, 237, 252, .86); }

/* faq */
.pom-faq { display: grid; gap: .55rem; margin-top: 1.25rem; max-width: 92ch; }
.pom-faq details { border: 1px solid var(--pom-line); border-radius: var(--ka-r-md, 10px); background: rgba(9, 16, 28, .55); }
.pom-faq summary { min-height: 48px; display: flex; align-items: center; padding: .75rem 1.05rem; font-size: .95rem; font-weight: 600; cursor: pointer; list-style: none; }
.pom-faq summary::-webkit-details-marker { display: none; }
.pom-faq summary::after { content: "+"; margin-left: auto; padding-left: 1rem; color: var(--pom-gold); font-size: 1.15rem; line-height: 1; }
.pom-faq details[open] summary::after { content: "\2212"; }
.pom-faq details[open] summary { color: #fff; }
.pom-faq details > p { margin: 0; padding: 0 1.05rem 1rem; font-size: .92rem; line-height: 1.7; color: rgba(226, 237, 252, .84); max-width: 84ch; }

@media (max-width: 640px) {
  .pom-dr__tabs button { flex: 1 1 50%; border-bottom: 1px solid var(--pom-line); }
}
@media (prefers-reduced-motion: reduce) {
  .pom-dr__tabs button { transition: none; }
}

/* Seven seams do not divide into four columns. The seventh is the one that
   closes the loop back to the first, so it takes the remaining width instead
   of leaving an orphan slot. */
@media (min-width: 1040px) {
  .pom-eight--chain { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pom-eight--chain .pom-eight__item:last-child { grid-column: span 2; }
  .pom-eight--chain .pom-eight__item:last-child::before {
    background: linear-gradient(180deg, rgba(95, 210, 240, .55), rgba(230, 184, 79, .55));
  }
}