/* TM Forum page: figure chips and grids, the autonomy stairs, the three tools and the code sample */

/* ---------- figure text and shapes ---------- */
.tm-chip rect{fill:#fff;stroke:var(--line-strong);stroke-width:1.25;transition:stroke .3s ease,fill .3s ease}
.tm-chip.teal rect{fill:#F0FDFA;stroke:#5EEAD4}
.tm-chip.purple rect{fill:#F5F3FF;stroke:#C4B5FD}
.tm-chip.slate rect{fill:var(--surface-2);stroke:var(--line-strong)}
.tm-chip.cyan rect{fill:var(--cyan-tint);stroke:var(--cyan-border)}
.tm-chip.orange rect{fill:#FFF7ED;stroke:#FDBA74}
.tm-chip.pink rect{fill:#FDF4FF;stroke:#F0ABFC}
.tm-chip.red rect{fill:#FFF1F2;stroke:#FDA4AF}
.tm-chip.hd rect{fill:var(--surface-2);stroke:var(--line)}
.tm-chip.nt rect{fill:#FFF7ED;stroke:var(--orange);stroke-dasharray:5 4}
.tm-chip.m-hl rect{stroke:var(--orange);stroke-width:2.5;filter:drop-shadow(0 0 6px rgba(249,115,22,.3))}
.motion-svg .tm-ct{font-size:12.5px;font-weight:600;fill:var(--ink);text-anchor:middle}
.motion-svg .tm-ct.b{font-size:12px}
.motion-svg .tm-chip.hd .tm-ct{font-size:11px;fill:var(--text)}
.motion-svg .tm-cl{font-size:10.5px;font-weight:600;fill:var(--orange-strong);text-anchor:middle}
.motion-svg .tm-rowl{font-size:12px;font-weight:600;fill:var(--ink);text-anchor:start}
.motion-svg .tm-ah1{font-size:12px;font-weight:700;fill:var(--ink);text-anchor:middle}
.motion-svg .tm-blk{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;fill:var(--cyan-strong);text-anchor:middle}
.motion-svg .tm-mono{font-family:var(--font-mono);font-size:11.5px;fill:#E2E8F0;text-anchor:start}
.motion-svg .tm-lv{font-family:var(--font-heading);font-size:17px;font-weight:700;fill:var(--ink);text-anchor:middle}
.motion-svg .tm-lvn{font-size:11px;font-weight:600;fill:var(--muted);text-anchor:middle}
.motion-svg .tm-lg{font-size:12px;fill:var(--muted);text-anchor:start}
.tm-area{fill:#EFF6FF;stroke:#BFDBFE;stroke-width:1.25;transition:stroke .3s ease}
.m-hl > .tm-area{stroke:var(--orange);stroke-width:2.5}
.tm-cell{fill:#fff;stroke:var(--line);stroke-width:1;transition:fill .3s ease,stroke .3s ease}
.tm-cell.m-hl{fill:#FFF7ED;stroke:var(--orange);stroke-width:2}
.tm-rowband{fill:rgba(236,254,255,.75);stroke:var(--cyan-border);stroke-width:1}
.tm-veil{fill:rgba(255,255,255,.96);stroke:var(--line);stroke-width:1}
.tm-card{fill:var(--navy);stroke:var(--navy)}
.tm-ah{fill:#94A3B8}
.tm-ah.or{fill:var(--orange)}
.tm-ah.pu{fill:var(--purple)}
.tm-ah.tl{fill:var(--teal)}
.tm-ah.sl{fill:#94A3B8}
.tm-loop{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-dasharray:6 6;opacity:.7}
.tm-stair{stroke-width:1.5;transition:stroke .3s ease}
.tm-stair.s0{fill:#F8FAFC;stroke:#CBD5E1}
.tm-stair.s1{fill:#F1F5F9;stroke:#CBD5E1}
.tm-stair.s2{fill:#ECFEFF;stroke:#A5F3FC}
.tm-stair.s3{fill:#CCFBF1;stroke:#5EEAD4}
.tm-stair.s4{fill:#99F6E4;stroke:#2DD4BF}
.tm-stair.s5{fill:#5EEAD4;stroke:#14B8A6}
.tm-stairg.m-hl .tm-stair{stroke:var(--orange);stroke-width:3}
.tm-bp{fill:var(--orange)}
.tm-bs{fill:var(--teal)}

/* ---------- tools ---------- */
.tm-tool{margin-top:26px}
.tm-tool h3{font-size:var(--fs-h4);margin:0 0 8px}
.tm-small{font-size:.9rem;color:var(--muted);margin:10px 0 0;max-width:80ch}
.tm-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;margin-top:14px;align-items:start}
.tm-tool-grid > *{min-width:0}
.tm-in{display:grid;gap:12px;align-content:start}
.tm-field{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink)}
.tm-field select{font:inherit;font-weight:500;font-size:.92rem;padding:8px 10px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);max-width:100%;width:100%}
.tm-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:.92rem}
.tm-dl dt{color:var(--muted)}
.tm-dl dd{margin:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.tm-dl dd code{font-size:.84rem}
.tm-verdict{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid var(--line)}
.tm-verdict.ok{background:#F0FDFA;border-color:#99F6E4}
.tm-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.tm-verdict.bad{background:#FFF1F2;border-color:#FECDD3}
.tm-meter{height:12px;border-radius:6px;background:#EEF2F6;overflow:hidden;margin-top:12px}
.tm-meter span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--orange),var(--teal));transition:width .3s ease}
.tm-oj-t td:first-child,.tm-oj-t th:first-child{width:2.2em;text-align:center}
.tm-oj-t td:nth-child(2){font-family:var(--font-mono);font-size:.8rem;white-space:nowrap}
.table-wrap .tm-oj-t{min-width:0}
.tm-st{display:inline-block;padding:1px 8px;border-radius:999px;font-family:var(--font-mono);font-size:.76rem;font-weight:600;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--muted);white-space:nowrap}
.tm-st.acknowledged,.tm-st.qualified{background:#EFF6FF;border-color:#BFDBFE;color:#1D4ED8}
.tm-st.inProgress{background:#FFF7ED;border-color:#FED7AA;color:#9A3412}
.tm-st.completed{background:#F0FDFA;border-color:#99F6E4;color:#115E59}
.tm-st.failed,.tm-st.rejected{background:#FFF1F2;border-color:#FECDD3;color:#9F1239}
.tm-st.partial,.tm-st.held,.tm-st.pending{background:#FFFBEB;border-color:#FDE68A;color:#92400E}
.tm-st.none{background:var(--surface-2)}
.tm-oj-t tr.skip td{color:var(--subtle)}
.no-js .tm-js{display:none}

/* ---------- tables and code ---------- */
.tm-apis td:nth-child(2){font-family:var(--font-mono);font-size:.84rem;white-space:nowrap}
.table-wrap .tm-narrow{min-width:0}
.cfg-wrap{margin-top:22px}
.cfg-cap{font-size:.9rem;color:var(--muted);margin:0 0 8px}
.cfg{margin:12px 0 0;padding:16px 18px;background:var(--navy);color:#E2E8F0;border-radius:var(--radius);overflow:auto;font-size:.8rem;line-height:1.65}
.cfg code{font-size:inherit;background:none;color:inherit;padding:0}
.gap-note{margin-top:8px}

@media (max-width:860px){
  .tm-tool-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .tm-dl{grid-template-columns:1fr;gap:2px}
  .tm-dl dd{margin-bottom:8px}
  .tm-oj-t td:nth-child(2){white-space:normal}
  .tm-oj-t td:first-child,.tm-oj-t th:first-child{display:none}
  .tm-narrow tr td:not(:first-child){color:var(--text)}
  .tm-narrow,.tm-narrow tbody,.tm-narrow tr,.tm-narrow td{display:block;width:100%}
  .table-wrap > .tm-narrow{min-width:0}
  .tm-narrow thead{display:none}
  .tm-narrow td{border:0;padding:2px 0}
  .tm-narrow tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .tm-narrow td:first-child{font-weight:600;color:var(--ink)}
}