/* ============================================================
   WHAT IS PROCESS.MD (home page, 2026-10-10). The hero's invoice chasing
   workflow drawn as a flowchart (left) and written as a PROCESS.md
   (right). js/process-explainer.js flies each group of boxes into the
   lines it becomes; while .is-anim is on, lines wait as grey skeleton
   text until their boxes land. Without it every line shows.
   ============================================================ */

.pmx { padding: 112px 0; border-top: 1px solid var(--line); }

.pmx-stage {
    display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: stretch;
    max-width: 1120px; margin: 0 auto;
}
.pmx-col { display: flex; flex-direction: column; min-width: 0; }
.pmx-label {
    margin: 0 0 12px; text-align: center;
    font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
}

/* ---- left: the flowchart. It sits above the document so the boxes fly over it ---- */
.pmx-col--flow { position: relative; z-index: 3; }
.pmx-canvas {
    position: relative; flex: 1; display: flex; align-items: center;
    padding: 20px 18px; border-radius: 22px; border: 1px solid var(--line);
    background-color: #FBF8F7;
    background-image: radial-gradient(#DDD4D1 1.1px, transparent 1.4px);
    background-size: 16px 16px;
}
.pmx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pmx-svg text { font-family: var(--font-sans); font-size: 10.5px; font-weight: 650; fill: #4E4854; }
.pmx-box { fill: #fff; stroke: #DCD4D1; stroke-width: 1; transition: stroke .2s, stroke-width .2s; }
.pmx-e { fill: none; stroke: #C6BDC0; stroke-width: 1.3; marker-end: url(#pmx-arr); transition: opacity .45s; }
.pmx-e.is-gone { opacity: .3; stroke-dasharray: 3 3; marker-end: none; }
.pmx-ghost { fill: none; stroke: #D3CAC7; stroke-width: 1; stroke-dasharray: 4 3; opacity: 0; transition: opacity .4s; }

/* picked: the group that becomes the next lines */
.pmx-n.is-pick .pmx-box { stroke: var(--c); stroke-width: 2.2; }
.pmx-body {
    transform-box: fill-box; transform-origin: 50% 50%;
    transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), opacity .25s; transition-delay: var(--st, 0ms);
}
.pmx-n.is-pick .pmx-body { transform: scale(1.06); }

/* the flight: x and y ease differently, so each box travels on an arc */
.pmx-fx { transition: transform .9s cubic-bezier(.6, 0, .35, 1); transition-delay: var(--st, 0ms); }
.pmx-fy { transition: transform .9s cubic-bezier(.2, .7, .3, 1); transition-delay: var(--st, 0ms); }
.pmx-n.is-flown .pmx-body {
    transform: scale(.5); opacity: 0;
    transition: transform .9s cubic-bezier(.5, 0, .3, 1), opacity .22s;
    transition-delay: var(--st, 0ms), calc(var(--st, 0ms) + .68s);
}
.pmx-n.is-flown .pmx-ghost { opacity: 1; transition-delay: calc(var(--st, 0ms) + .2s); }

/* once every box has moved: the empty flowchart confirms it, until the boxes fly home */
.pmx-note {
    position: absolute; left: 50%; top: 50%; margin: 0; z-index: 2;
    display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; border-radius: 12px; white-space: nowrap;
    background: #fff; border: 1px solid #CDEBD9; box-shadow: var(--shadow-low);
    font-size: .875rem; font-weight: 700; color: var(--ok-fg);
    opacity: 0; transform: translate(-50%, -38%); transition: opacity .35s, transform .35s; pointer-events: none;
}
.pmx-note svg { flex: none; width: 18px; height: 18px; }
.pmx.is-extras .pmx-note, .pmx.is-ready .pmx-note { opacity: 1; transform: translate(-50%, -50%); }

/* ---- right: the PROCESS.md ---- */
.pmx-col--doc { position: relative; z-index: 1; }
.pmx-doc {
    border-radius: 22px; background: #fff; border: 1.5px solid var(--ink); overflow: hidden;
    box-shadow: 0 24px 50px -20px rgba(17, 24, 39, .22), 0 2px 6px -2px rgba(17, 24, 39, .06);
}
.pmx-doc-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.pmx-doc-head > div { flex: 1; min-width: 0; }
.pmx-doc-head h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
.pmx-doc-head > div p { margin: 2px 0 0; font-size: .8125rem; line-height: 1.35; color: var(--muted); }
.pmx-doc-ico {
    flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
    border: 1px solid var(--line); background: #fff;
}
.pmx-doc-ico img { width: 20px; height: 20px; }
.pmx-file { margin: 0; padding: 12px 18px 4px; font: 600 .75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.pmx-file b { color: var(--ink); font-weight: 700; }

.pmx-sec {
    display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 10px;
    margin: 0 10px; padding: 6px 8px; border-radius: 12px; transition: background-color .4s;
}
.pmx-sec + .pmx-sec { margin-top: 2px; }
.pmx-sec.is-focus { background-color: #F8F5F4; background-color: color-mix(in srgb, var(--c) 6%, #fff); }
.pmx-lab { margin: 0; padding-top: 5px; font: 700 .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); transition: color .3s; }
.pmx-lab i { font-style: normal; color: #D3CAC7; transition: color .3s; }
.pmx-sec.is-done .pmx-lab, .pmx:not(.is-anim) .pmx-lab { color: var(--ink); }
.pmx-sec.is-done .pmx-lab i, .pmx:not(.is-anim) .pmx-lab i { color: var(--c); }

.pmx-line { position: relative; margin: 0; padding: 3px 6px; border-radius: 8px; font-size: .9375rem; line-height: 1.5; color: var(--ink); }
.pmx-line b { font-weight: 800; }
.pmx-doc code {
    display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px; background: var(--soft);
    font: 600 .75rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--body);
}
.pmx-cb { display: inline-block; vertical-align: -2px; width: 14px; height: 14px; margin-right: 9px; border: 1.5px solid #CFC7C4; border-radius: 4px; }
/* a todo that wraps keeps its later lines under its words, not under the box
   (the box is 14px plus its 9px gap) */
.pmx-todo { padding-left: 29px; text-indent: -23px; }

/* lines wait as skeleton text: grey bars the shape of the words */
.pmx-txt {
    border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    transition: color .4s, background-color .4s;
}
.pmx-txt * { transition: color .4s, background-color .4s, border-color .4s, opacity .4s; }
.pmx.is-anim .pmx-line:not(.is-in) .pmx-txt { color: transparent; background-color: #F0EAE8; }
.pmx.is-anim .pmx-line:not(.is-in) .pmx-txt * { color: transparent; background-color: transparent; border-color: transparent; }
.pmx.is-anim .pmx-line:not(.is-in) .pmx-txt img { opacity: 0; }
/* a line just landed */
.pmx-line.is-flash { animation: pmx-flash 1s ease-out; }
@keyframes pmx-flash {
    0% { background-color: #EEF1FF; background-color: color-mix(in srgb, var(--c) 20%, #fff); }
    100% { background-color: transparent; }
}

.pmx-trigger { flex: none; padding: 0; }
.pmx-trigger .pmx-txt {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px;
    background: #F1EFFF; color: #4B3FCB; font-size: .75rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.pmx-trigger img { width: 15px; height: 15px; transition: opacity .4s; }

.pmx-doc-foot {
    display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 18px;
    border-top: 1px solid var(--line); background: #FCFAF9;
}
.pmx-lab-s { flex: none; font: 700 .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.pmx-doc-foot .pmx-line { flex: 1; min-width: 0; padding: 0; }
.pmx-ready {
    flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    background: var(--ok-bg); color: var(--ok-fg); font-size: .75rem; font-weight: 700; white-space: nowrap;
    opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s;
}
.pmx-ready i { width: 7px; height: 7px; border-radius: 99px; background: #2F9E6A; }
.pmx.is-ready .pmx-ready, .pmx:not(.is-anim) .pmx-ready { opacity: 1; transform: none; }

/* ---- the guide link ---- */
.pmx-more { margin: 36px 0 0; text-align: center; }
.pmx-guide {
    display: inline-flex; gap: 6px; padding-bottom: 1px;
    font-size: .9375rem; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid currentColor;
}

/* back to the start without animating, when the section leaves the screen */
.pmx.no-tr *, .pmx.no-tr *::before, .pmx.no-tr *::after { transition: none !important; animation: none !important; }

@media (max-width: 1100px) {
    .pmx-stage { gap: 36px; }
    .pmx-sec { grid-template-columns: 100px minmax(0, 1fr); }
    .pmx-line { font-size: .875rem; }
}
@media (max-width: 959px) {
    .pmx-stage { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 620px; }
    .pmx-canvas { flex: none; }
}
@media (max-width: 767px) {
    .pmx { padding: 72px 0; }
    .pmx-canvas { padding: 14px 10px; }
    .pmx-doc-head { flex-wrap: wrap; padding: 14px; }
    .pmx-trigger { order: 3; width: 100%; padding-left: 50px; }
    .pmx-file { padding: 10px 14px 4px; }
    .pmx-sec { grid-template-columns: minmax(0, 1fr); margin: 0 6px; padding: 6px 8px; }
    .pmx-lab { padding-top: 2px; }
    .pmx-doc-foot { flex-wrap: wrap; padding: 12px 14px; }
    /* file names stay whole; when they do not fit beside the badge, the
       badge takes the next line instead of splitting a name in two */
    .pmx-doc code { white-space: nowrap; }
    .pmx-doc-foot .pmx-line { min-width: auto; }
    .pmx-ready { margin-left: auto; }
}