/* APM page media: the cx CLI terminal window (product shots are live replays; the hero uses the shared .page-hero.is-app).
   Classes are prefixed apx- to stay clear of the homepage demo's state names. Behaviour lives in page.js. */

/* ───────────── Terminal window ───────────── */
.showcase, .feature { perspective: 1800px; }
.apx-win {
  position: relative; margin: 0; border-radius: 16px; background: #0c0c0d; isolation: isolate;
  border: 1px solid rgb(var(--ink) / .1);
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / calc(.95 * var(--sh))), inset 0 1px 0 rgb(var(--ink) / .06);
  rotate: var(--tilt-x, 0) var(--tilt-y, 0) 0 var(--tilt, 0deg);
  transition: opacity .9s var(--ease), transform .9s var(--ease), rotate .6s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.apx-win::after { /* gradient hairline: mint on the lit corner */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: radial-gradient(420px circle at var(--gx, 30%) var(--gy, 0%), rgba(134,255,201,.75), rgba(19,233,137,.12) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .55; transition: opacity .4s;
}
.apx-win:hover { border-color: rgba(134,255,201,.22); box-shadow: 0 40px 90px -40px rgb(0 0 0 / calc(.95 * var(--sh))), inset 0 1px 0 rgb(var(--ink) / .06); }
.apx-win:hover::after { opacity: 1; }
.apx-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 14px; border-bottom: 1px solid rgb(var(--ink) / .07); background: linear-gradient(180deg, #161618, #111113); border-radius: 15px 15px 0 0; }
.apx-bar span { flex: 1; min-width: 0; margin-left: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ───────────── cx CLI terminal ───────────── */
.apx-term { background: #0f1012; }
.apx-term-body {
  margin: 0; height: 330px; padding: 22px 24px; overflow: hidden; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: #d7dbe0; white-space: pre;
  background: radial-gradient(90% 70% at 0% 0%, rgba(19,233,137,.07), transparent 60%), #0f1012; border-radius: 0 0 15px 15px;
}
.apx-term-body .p { color: var(--accent); }
.apx-term-body .f { color: var(--mint); }
.apx-term-body .s { color: #f5c344; }
.apx-term-body .d { color: var(--fg-3); }
.apx-term-body .ok { color: #5bd08f; }
.apx-term-body .warn { color: #f5c344; }
.apx-term-body .bad { color: #ff6b77; font-weight: 600; }
.apx-term-body .row { display: block; animation: apx-line .35s var(--ease) both; }
@keyframes apx-line { from { opacity: 0; transform: translateY(4px); } }
.apx-term-body .cur { display: inline-block; width: .6em; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--mint); animation: apx-cur 1s steps(1) infinite; }
@keyframes apx-cur { 50% { opacity: 0; } }

/* ───────────── One service, every signal: what each section of the tour adds ───────────── */
.apx-tour { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: tour; }
.apx-tour li { counter-increment: tour; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: rgb(var(--ink) / .02); }
.apx-tour b { display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.apx-tour b::before { content: "0" counter(tour); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--accent); }
.apx-tour span { display: block; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
@media (max-width: 960px) { .apx-tour { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .apx-tour { grid-template-columns: minmax(0, 1fr); gap: 10px; } .apx-tour li { padding: 14px 16px; } }

/* ───────────── Responsive ───────────── */
@media (max-width: 760px) {
  .apx-term-body { height: 300px; font-size: 10.5px; padding: 18px; }
}
@media (max-width: 560px) {
  .apx-bar { height: 32px; }
  .apx-bar span { font-size: 10.5px; }
  .apx-win { border-radius: 12px; }
  .apx-bar { border-radius: 11px 11px 0 0; }
  .apx-term-body { border-radius: 0 0 11px 11px; }
  .apx-term-body { font-size: 8.6px; padding: 14px; height: 214px; }
}
@media (prefers-reduced-motion: reduce) {
  .apx-win { rotate: none; }
}

/* Light skin: small green text uses --mint (≥4.5:1 on the light surfaces); --accent stays for dots, fills,
   borders and large numbers. Light only, so the dark skin is unchanged. */
:root[data-theme="light"] .apx-tour b::before { color: var(--mint); }