/* REST API integrations page only. Loaded via `extra: crm, p-integrations-rest-apis`. Every class is scoped with .pira- */

/* ---------- shared bits: HTTP verb tags ---------- */
.pira-verb { --k: #1D5FA8; --t: #E4EEFA; display: inline-grid; place-items: center; min-width: 46px; padding: 4px 7px; border-radius: 6px; background: var(--t); color: var(--k); font: 800 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.pira-verb--get { --k: #0E7C86; --t: #DDF3F4; }
.pira-verb--post { --k: #1D5FA8; --t: #E4EEFA; }
.pira-verb--put { --k: #8A5A00; --t: #FDF0D5; }
.pira-verb--patch { --k: #7C3AED; --t: #EFE8FD; }
.pira-verb--del { --k: #B4232C; --t: #FCE7E8; }
.pira-verb--ok { --k: #2F7D4A; --t: #E3F4E8; }

/* ---------- hero: request / response panes ---------- */
.pira-hero .pira-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pira-hero .pg-h1 { font-size: clamp(34px, 1.3rem + 2.3vw, 52px); max-width: 17ch; }
.pira-hero .crm-sub { max-width: 46ch; }
.pira-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 600px; }
.pira-chips li { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid #DCE4EC; font: 600 13.5px/1.25 var(--f-body); color: #0B2A44; box-shadow: 0 10px 20px -16px rgba(8,34,56,.5); }

.pira-wire { position: relative; margin: 0; padding: 18px; border-radius: 22px; background: linear-gradient(160deg, #0B2540, #0A3A63 60%, #0B4F58); box-shadow: 0 44px 80px -44px rgba(8,34,56,.75); color: #D7E6F0; }
.pira-wire__panes { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); align-items: stretch; }
.pira-pane { min-width: 0; padding: 12px 14px 14px; border-radius: 14px; background: rgba(2,14,26,.55); border: 1px solid rgba(159,192,216,.18); }
.pira-pane__bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 10.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #8FB3CA; }
.pira-pane__bar em { margin-left: auto; font-style: normal; color: #FFB81C; }
.pira-status { margin-left: auto; padding: 4px 8px; border-radius: 6px; background: rgba(63,185,122,.18); color: #7BE0A6; font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; text-transform: none; transition: background-color 300ms, color 300ms; }
.pira-status.is-warn { background: rgba(255,184,28,.18); color: #FFCF5C; }
.pira-status.is-wait { background: rgba(159,192,216,.14); color: #9FC0D8; }
.pira-pane__line { margin: 0; font: 600 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; word-break: break-all; }
.pira-m { color: #5FD3F3; }
.pira-pane__hdr { margin: 6px 0 8px; padding-bottom: 8px; border-bottom: 1px dashed rgba(159,192,216,.2); font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #7F9DB3; word-break: break-all; }
.pira-json { min-height: 196px; margin: 0; font: 500 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: #D7E6F0; white-space: pre-wrap; word-break: break-word; }
.pira-json .k { color: #8ED8F8; }
.pira-json .s { color: #FFD27A; }
.pira-json .n { color: #B9F2C9; }
.pira-json .l { display: block; animation: pira-in 280ms ease-out both; }
@keyframes pira-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.pira-cable { position: relative; }
.pira-cable::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(159,192,216,.45) 0 6px, transparent 6px 11px); }
.pira-cable__dot { position: absolute; left: 0; top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: #FFB81C; box-shadow: 0 0 0 5px rgba(255,184,28,.22); opacity: 0; }
.pira-cable__dot--back { background: #3FB97A; box-shadow: 0 0 0 5px rgba(63,185,122,.22); }
.pira-cable__dot.is-go { animation: pira-go 700ms ease-in-out both; }
.pira-cable__dot--back.is-go { animation: pira-back 700ms ease-in-out both; }
@keyframes pira-go { 0% { opacity: 0; left: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 12px); } }
@keyframes pira-back { 0% { opacity: 0; left: calc(100% - 12px); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; left: 0; } }
.pira-calls { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.pira-calls li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 36px 92px; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.05); font: 500 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; transition: background-color 300ms, opacity 300ms; }
.pira-calls code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #D7E6F0; font: inherit; }
.pira-calls b { font-weight: 800; }
.pira-calls b.is-ok { color: #7BE0A6; }
.pira-calls b.is-warn { color: #FFCF5C; }
.pira-calls time { color: #7F9DB3; text-align: right; white-space: nowrap; }
.pira-calls li.is-now { background: rgba(95,211,243,.14); }
.pira-wire.is-arm .pira-calls li { opacity: .45; }
.pira-wire.is-arm .pira-calls li.is-now, .pira-wire.is-arm .pira-calls li.is-done { opacity: 1; }

/* ---------- fit: 200 / 303 board ---------- */
.pira-fit__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; margin-top: 36px; }
.pira-fit__col { padding: 24px 26px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 18px 36px -32px rgba(8,34,56,.6); }
.pira-fit__col--no { background: #F8FAFC; border-style: dashed; border-color: #CBD5E1; box-shadow: none; }
.pira-fit__code { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 700 19px/1.2 var(--f-display); color: #082238; }
.pira-fit__code span { padding: 6px 11px; border-radius: 8px; background: #E3F4E8; color: #2F7D4A; font: 800 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.pira-fit__col--no .pira-fit__code span { background: #EEF2F6; color: #475569; }
.pira-fit__col ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: pira; }
.pira-fit__col li { position: relative; padding-left: 40px; font-size: 15px; line-height: 1.55; color: #475569; counter-increment: pira; }
.pira-fit__col li::before { content: "0" counter(pira); position: absolute; left: 0; top: 1px; font: 700 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: #94A3B8; }
.pira-fit__col li b { display: block; margin-bottom: 2px; font: 700 16px/1.35 var(--f-display); color: #082238; }
.pira-fit__col a { color: #0A5A8C; font-weight: 600; }

/* ---------- services: endpoint list ---------- */
.pira-svc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 36px 0 0; padding: 8px 26px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; list-style: none; }
.pira-ep { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid #EEF2F6; }
.pira-ep:nth-last-child(-n+2) { border-bottom: 0; }
.pira-ep > .pira-verb { align-self: start; margin-top: 3px; }
.pira-ep h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pira-ep p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.pira-ep p a { color: #0A5A8C; font-weight: 600; }
.pira-ep > code { grid-column: 2; justify-self: start; margin-top: 8px; padding: 3px 8px; border-radius: 6px; background: #F3F7F9; color: #64748B; font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- story: terminal build log ---------- */
.pira-term { max-width: 1060px; margin: 40px auto 0; border-radius: 20px; background: #071A2C; border: 1px solid #12324F; box-shadow: 0 50px 90px -60px rgba(8,34,56,.9); overflow: hidden; }
.pira-term__bar { display: flex; align-items: center; gap: 7px; margin: 0; padding: 12px 18px; background: #0B2540; border-bottom: 1px solid #12324F; font: 600 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8FB3CA; }
.pira-term__bar i { width: 10px; height: 10px; border-radius: 50%; background: #FF6B5F; }
.pira-term__bar i:nth-child(2) { background: #FFB81C; } .pira-term__bar i:nth-child(3) { background: #3FB97A; }
.pira-term__bar span { margin-left: 10px; }
.pira-term__bar em { margin-left: auto; font-style: normal; font-family: var(--f-body); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #FFB81C; }
.pira-term__phases { margin: 0; padding: 0; list-style: none; }
.pira-ph { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-top: 1px solid #12324F; }
.pira-ph:first-child { border-top: 0; }
.pira-ph__note { padding: 24px 26px; background: #F3F7F9; border-right: 1px solid #12324F; }
.pira-ph__n { display: inline-block; padding: 4px 9px; border-radius: 6px; background: #082238; color: #5FD3F3; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.pira-ph__note h3 { margin: 10px 0 6px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pira-ph__note p { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.pira-ph__log { margin: 0; padding: 22px 24px; overflow-x: auto; font: 500 12.5px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; color: #D7E6F0; white-space: pre; }
.pira-ph__log .c { color: #6C8BA3; }
.pira-ph__log .p { color: #FFB81C; }
.pira-ph__log .m { color: #8FB3CA; }
.pira-ph__log .ok { color: #7BE0A6; }
.pira-ph__log .w { color: #FFCF5C; }
.pira-ph__log .er { color: #FF8A80; }
.pira-ph__log .tl { display: inline; opacity: 1; transition: opacity 260ms ease-out; }
.pira-term.is-arm .pira-ph__log .tl { opacity: 0; }
.pira-term.is-arm .pira-ph__log .tl.is-on { opacity: 1; }
.pira-term.is-arm .pira-ph__note > * { opacity: .4; transition: opacity 400ms; }
.pira-term.is-arm .pira-ph.is-on .pira-ph__note > * { opacity: 1; }
.pira-caret { display: inline-block; width: 8px; height: 15px; vertical-align: -3px; background: #D7E6F0; animation: pira-blink 1s steps(1) infinite; }
@keyframes pira-blink { 50% { opacity: 0; } }

/* ---------- interactive: field mapper (dark band) ---------- */
.pira-map__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 34px; align-items: start; }
.pira-src { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pira-src__btn { display: grid; gap: 3px; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(159,192,216,.35); background: rgba(255,255,255,.04); color: #D7E6F0; text-align: left; cursor: pointer; transition: background-color 200ms, border-color 200ms, color 200ms; }
.pira-src__btn b { font: 700 14px/1.2 var(--f-display); }
.pira-src__btn span { font: 600 11.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8FB3CA; }
.pira-src__btn:hover { border-color: #9FC0D8; }
.pira-src__btn.is-on { background: #fff; border-color: #fff; color: #082238; }
.pira-src__btn.is-on span { color: #0A5A8C; }
.pira-src__btn:focus-visible, .pira-map__reset:focus-visible, .pira-row select:focus-visible { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pira-rows { display: grid; gap: 8px; margin-top: 14px; }
.pira-row { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(159,192,216,.18); }
.pira-row.is-bad { border-color: rgba(255,138,128,.6); background: rgba(255,138,128,.08); }
.pira-row__src { min-width: 0; }
.pira-row__src code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; }
.pira-row__src small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; font: 500 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #FFD27A; }
.pira-row__arrow { width: 22px; height: 2px; background: #5FD3F3; position: relative; }
.pira-row__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid #5FD3F3; border-right: 2px solid #5FD3F3; transform: rotate(45deg); }
.pira-row select { width: 100%; min-width: 0; padding: 8px 28px 8px 10px; border-radius: 9px; border: 1px solid rgba(159,192,216,.4); background: #0B2540 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239FC0D8' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center / 11px; color: #fff; font: 600 12.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; appearance: none; -webkit-appearance: none; cursor: pointer; }
.pira-map__reset { margin-top: 12px; padding: 8px 12px; border-radius: 9px; border: 1px dashed rgba(159,192,216,.45); background: transparent; color: #9FC0D8; font: 600 13px/1.2 var(--f-body); cursor: pointer; }
.pira-map__reset:hover { color: #fff; border-color: #fff; }
.pira-map__out { padding: 18px; border-radius: 18px; background: #F7FAFC; color: #334155; box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); min-width: 0; }
.pira-map__ep { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; }
.pira-map__ep code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #082238; }
.pira-map__body { margin: 12px 0 0; padding: 14px 16px; min-height: 210px; border-radius: 12px; background: #082238; color: #D7E6F0; font: 500 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.pira-map__body .k { color: #8ED8F8; } .pira-map__body .s { color: #FFD27A; } .pira-map__body .n { color: #B9F2C9; }
.pira-map__body .x { color: #6C8BA3; }
.pira-map__body .hl { background: rgba(255,184,28,.22); border-radius: 3px; }
.pira-map__say { margin: 14px 2px 0; font: 600 15px/1.5 var(--f-body); color: #082238; }
.pira-map__checks { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.pira-map__checks li { position: relative; padding: 9px 12px 9px 36px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.pira-map__checks li::before { position: absolute; left: 12px; top: 9px; font: 800 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.pira-map__checks li.ok { background: #E8F5EC; color: #1F5A35; }
.pira-map__checks li.ok::before { content: "✓"; color: #2F7D4A; }
.pira-map__checks li.warn { background: #FFF6DD; color: #6B4A00; }
.pira-map__checks li.warn::before { content: "!"; color: #B7791F; left: 15px; }
.pira-map__checks li.bad { background: #FDECEC; color: #8A1C24; }
.pira-map__checks li.bad::before { content: "✗"; color: #B4232C; }
.pira-map__foot { margin: 22px 0 0; font-size: 14px; line-height: 1.55; color: #9FC0D8; }

/* ---------- Zoho patterns ---------- */
.pira-zo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.pira-zo__card { padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 16px 34px -30px rgba(8,34,56,.6); }
.pira-zo__dir { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 17px/1.3 var(--f-display); color: #082238; }
.pira-zo__dir span { padding: 4px 9px; border-radius: 6px; background: #082238; color: #5FD3F3; font: 700 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.pira-zo__hops { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 14px 0; padding: 0; list-style: none; }
.pira-zo__hops li { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: #F3F7F9; border: 1px solid #E2E8F0; font: 600 12.5px/1.3 var(--f-body); color: #334155; }
.pira-zo__hops li:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 50%; width: 10px; height: 2px; background: #94A3B8; }
.pira-zo__hops img { width: 18px; height: 18px; }
.pira-zo__card > p:last-child { margin: 0; font-size: 15px; line-height: 1.6; color: #475569; }
.pira-zo__card a { color: #0A5A8C; font-weight: 600; }

/* ---------- pricing ---------- */
.pira-price__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.pira-price__col { padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pira-price__col--ours { border-color: #F3D48A; background: #FFFBF0; }
.pira-price__col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pira-price__col h3 span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #082238; color: #fff; font: 800 13px/1 var(--f-body); }
.pira-price__col--ours h3 span { background: #FFB81C; color: #082238; }
.pira-price__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pira-price__col li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.55; color: #475569; }
.pira-price__col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: #00A3D9; }
.pira-price__ours { max-width: 880px; margin: 22px 0 0; padding: 16px 20px; border-left: 4px solid #FFB81C; border-radius: 0 12px 12px 0; background: #FFFBF0; font-size: 15.5px; line-height: 1.6; color: #334155; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pira-hero .pira-hero__grid, .pira-map__grid { grid-template-columns: 1fr; }
  .pira-wire { max-width: 640px; }
}
@media (max-width: 900px) {
  .pira-fit__grid, .pira-zo__grid, .pira-price__grid { grid-template-columns: 1fr; }
  .pira-svc__list { grid-template-columns: 1fr; }
  .pira-ep:nth-last-child(2) { border-bottom: 1px solid #EEF2F6; }
  .pira-ph { grid-template-columns: 1fr; }
  .pira-ph__note { border-right: 0; border-bottom: 1px solid #12324F; }
}
@media (max-width: 640px) {
  .pira-wire { padding: 12px; }
  .pira-wire__panes { grid-template-columns: 1fr; grid-template-rows: auto 26px auto; }
  .pira-cable::before { left: 50%; right: auto; top: 2px; bottom: 2px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(159,192,216,.45) 0 6px, transparent 6px 11px); }
  .pira-cable__dot { display: none; }
  .pira-json { min-height: 0; }
  .pira-calls li { grid-template-columns: 46px minmax(0, 1fr) 34px; }
  .pira-calls time { display: none; }
  .pira-svc__list { padding: 4px 18px; }
  .pira-ep { grid-template-columns: 1fr; }
  .pira-ep > code { grid-column: 1; }
  .pira-ep > .pira-verb { justify-self: start; }
  .pira-ph__note { padding: 18px; }
  .pira-ph__log { padding: 16px; font-size: 11.5px; }
  .pira-src { grid-template-columns: 1fr; }
  .pira-row { grid-template-columns: 1fr; gap: 6px; }
  .pira-row__arrow { display: none; }
  .pira-fit__col { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pira-json .l, .pira-cable__dot.is-go, .pira-caret { animation: none !important; }
  .pira-ph__log .tl, .pira-ph__note > *, .pira-src__btn, .pira-status { transition: none !important; }
}
.pira-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }