/* AI page — escalation ladder, capability manifest and provenance chips.
   Loads after styles.css and landing.css, which supply .mk-*, .lp-*, .pillar-*. */

/* ----- the layer ladder -----
   Two columns: the written layers on the left, a flow diagram on the right.
   align-items:stretch makes the figure match the ladder's height exactly, so the
   right-hand side never reads as empty space. */
.ai-ladder-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: stretch; margin-top: 36px; }
.ai-ladder { display: grid; gap: 12px; align-content: start; }
.ai-layer { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.ai-layer.is-local { border-color: rgba(61, 75, 208, .22); background: linear-gradient(120deg, #fbfbff, #f4f5ff); }
.ai-layer.is-model { border-style: dashed; border-color: rgba(176, 106, 22, .38); background: rgba(176, 106, 22, .035); }
.ai-layer-n { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(150deg, #5560e8, #7b4fd6); }
.ai-layer.is-model .ai-layer-n { background: linear-gradient(150deg, #c08416, #b06a16); }
.ai-layer-b { min-width: 0; }
.ai-layer-b b { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.ai-layer-b p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.ai-layer-t { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; white-space: nowrap; }
.ai-cost { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 99px; padding: 3px 10px; }
.ai-cost.free { color: #1d7a46; background: #dcf3e7; }
.ai-cost.paid { color: #b06a16; background: rgba(176, 106, 22, .1); }
.ai-egress { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); }

/* ----- the diagram beside the ladder -----
   It carries the one thing the list beside it cannot show: where the cost and
   data-egress boundary sits. Layers 1-3 are drawn contained; layer 4 sits outside
   a dashed line. Text is styled here so it inherits the site's font. */
.ai-flow { margin: 0; display: flex; flex-direction: column; }
.ai-flow svg { flex: 1 1 auto; width: 100%; min-height: 0; }
.ai-flow .f-bar rect { fill: #fff; stroke: #e4e6f2; stroke-width: 1; }
.ai-flow .f-n { font-size: 13px; font-weight: 800; fill: #fff; text-anchor: middle; }
.ai-flow .f-lbl { font-size: 13.5px; font-weight: 800; fill: var(--ink); letter-spacing: -.01em; }
.ai-flow .f-sub { font-size: 11.5px; font-weight: 600; fill: var(--ink-soft); }
.ai-flow .f-sub-w { fill: #8a6a3a; }
.ai-flow .f-cap { font-size: 10px; font-weight: 800; letter-spacing: .12em; fill: var(--indigo); }
.ai-flow .f-note { font-size: 11.5px; font-weight: 700; fill: #1d7a46; }
.ai-flow .f-edge { font-size: 10px; font-weight: 800; letter-spacing: .1em; fill: #b06a16; }
.ai-flow .f-off { font-size: 10px; font-weight: 800; letter-spacing: .07em; fill: #b06a16; }
.ai-flow .f-foot { font-size: 11.5px; font-weight: 600; fill: var(--ink-faint); }

/* ----- capability manifest ----- */
.ai-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.ai-cap-col { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.ai-cap-col > h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.ai-cap-col > h3 .n { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; color: var(--indigo); background: rgba(61, 75, 208, .09); border-radius: 99px; padding: 3px 9px; }
.ai-cap-col > p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.ai-cap-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.ai-cap-list li { font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; gap: 9px; align-items: flex-start; line-height: 1.5; }
.ai-cap-list li .ms { font-size: 16px; color: var(--indigo); flex: 0 0 auto; margin-top: 1px; }
.ai-cap-col.is-draft .ai-cap-list li .ms { color: #b06a16; }
.ai-cap-col.is-draft > h3 .n { color: #b06a16; background: rgba(176, 106, 22, .1); }

/* ----- provenance chips ----- */
.ai-src { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ai-src span { font-size: 12.5px; font-weight: 700; border-radius: 99px; padding: 6px 13px; border: 1px solid; }
.ai-src .s-calc { color: #1d7a46; background: #dcf3e7; border-color: rgba(29, 122, 70, .2); }
.ai-src .s-rule { color: var(--indigo); background: rgba(61, 75, 208, .07); border-color: rgba(61, 75, 208, .2); }
.ai-src .s-det  { color: #454b61; background: #f0f1f7; border-color: var(--line); }
.ai-src .s-cur  { color: #6a4fb0; background: #f2eefc; border-color: rgba(106, 79, 176, .2); }
.ai-src .s-ai   { color: #b06a16; background: rgba(176, 106, 22, .1); border-color: rgba(176, 106, 22, .26); }

/* ----- extraction mockup (the .mk-ai-* assistant styles live in styles.css,
   shared with the homepage Cobalt Intelligence section) ----- */
/* Both cards the same height — but by giving the assistant card real content
   (the follow-up chips the product actually shows) rather than stretching an
   empty bubble. The chip row is pinned to the bottom so any residual difference
   lands as card padding, not as a hole in the middle of the answer. */
.ai-mk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; align-items: stretch; }
.ai-mk-grid .mk-ai { display: flex; flex-direction: column; }
.mk-ai-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 13px; }
.mk-ai-next-h { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-right: 2px; }
.mk-ai-chip { font-size: 10.5px; font-weight: 700; color: var(--indigo); background: rgba(61, 75, 208, .06); border: 1px solid rgba(61, 75, 208, .16); border-radius: 99px; padding: 4px 9px; }
.mk-x-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f4f5fa; }
.mk-x-row:last-child { border-bottom: 0; }
.mk-x-row span { color: #6a7088; font-weight: 600; }
.mk-x-row b { color: var(--ink); font-weight: 800; }
.mk-x-cite { font-size: 9.5px; font-weight: 700; color: var(--indigo); background: rgba(61, 75, 208, .07); border-radius: 5px; padding: 2px 6px; }
.mk-x-warn { font-size: 9.5px; font-weight: 700; color: #b06a16; background: rgba(176, 106, 22, .1); border-radius: 5px; padding: 2px 6px; }

/* ----- "what it isn't" list ----- */
.ai-nots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; margin-top: 30px; list-style: none; padding: 0; }
.ai-nots li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.ai-nots li .ms { font-size: 18px; color: #c43c3c; flex: 0 0 auto; margin-top: 1px; }
.ai-nots li b { color: var(--ink); font-weight: 800; }

/* below this the 340px figure column gets too cramped to read, so the diagram
   moves under the ladder — where it must stop flexing and take its natural height */
@media (max-width: 1080px) {
  .ai-ladder-wrap { grid-template-columns: 1fr; gap: 28px; }
  .ai-flow { max-width: 340px; }
  .ai-flow svg { flex: 0 0 auto; height: auto; }
}

@media (max-width: 860px) {
  .ai-caps, .ai-mk-grid, .ai-nots { grid-template-columns: 1fr; }
  .ai-layer { grid-template-columns: 38px 1fr; }
  .ai-layer-n { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }
  .ai-layer-t { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; margin-top: 8px; }
}