/* Pakstoor :: pks-art.css :: v1.0-000003 :: 2026-10-12 */
/*
  Copyright © 2026 Pakstoor (Pty) Ltd. All rights reserved.
  Flat spot illustrations (inline SVG, class .pa) for /how-it-works and the /login "See how it works" card.
  Colours come from the tokens below so one drawing works in both themes. Brand: warm black, white, gold.
  Animations play once when the art scrolls into view (js/pks-art.js adds .pa-armed then .is-in);
  without JS, or with reduced motion, the finished picture shows.
*/

/* ---- tokens ------------------------------------------------------------------------------------------- */
.pa {
  --a-card: #FFFFFF;
  --a-soft: #F5F3F0;
  --a-line: #E2DDD5;
  --a-ink: #1E1B18;
  --a-mute: #BDB6AD;
  --a-gold: #D9A625;
  --a-goldl: #F7E8BC;
  --a-goldd: #8A6410;
  --a-dark: #1E1B18;
  /* 2026-10-12 status accents (same hues as the /trust levels) */
  --a-ok: #16A34A;
  --a-okl: #DCFCE7;
  --a-bad: #DC2626;
  --a-badl: #FEE2E2;
  --a-info: #2B77B5;
  --a-vio: #8F6AF0;
}
html:not([data-theme="light"]) .pa {
  --a-card: #3A3530;
  --a-soft: #2A2622;
  --a-line: #4E4842;
  --a-ink: #F1EFED;
  --a-mute: #857D75;
  --a-goldl: #5A4718;
  --a-goldd: #E7BE52;
  --a-ok: #22C55E;
  --a-okl: #14532D;
  --a-bad: #F05252;
  --a-badl: #4C1D1D;
  --a-info: #7FB2DE;
  --a-vio: #A078FF;
}

/* ---- paint classes ------------------------------------------------------------------------------------ */
.pa .pa-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pa .fc { fill: var(--a-card); }
.pa .fs { fill: var(--a-soft); }
.pa .fl { fill: var(--a-line); }
.pa .fi { fill: var(--a-ink); }
.pa .fm { fill: var(--a-mute); }
.pa .fg { fill: var(--a-gold); }
.pa .fgl { fill: var(--a-goldl); }
.pa .fgd { fill: var(--a-goldd); }
.pa .fk { fill: var(--a-dark); }
.pa .n { fill: none; }
.pa .sl { stroke: var(--a-line); stroke-width: 1.5; }
.pa .si { stroke: var(--a-ink); }
.pa .sg { stroke: var(--a-gold); }
.pa .sgl { stroke: var(--a-goldl); }
.pa .sgd { stroke: var(--a-goldd); }
.pa .sm { stroke: var(--a-mute); }
.pa .sk { stroke: var(--a-dark); }
.pa .sc { stroke: var(--a-card); }
.pa .pa-beam { fill: var(--a-gold); }
.pa .pa-t { font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -0.01em; }
.pa .pa-mono { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0; }

/* ---- motion (only when armed by JS and allowed) ------------------------------------------------------- */
@keyframes pa-trail { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes pa-drive { from { transform: translateX(-150px); opacity: 0; } 18% { opacity: 1; } to { transform: none; opacity: 1; } }
/* opacity is part of the pop: .pa-armed hides these until they play (v1.0-000001 left them hidden for good) */
@keyframes pa-pop { 0% { transform: scale(0); opacity: 0; } 20% { opacity: 1; } 70% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pa-dot { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pa-spark { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes pa-pulse { 0%, 100% { stroke-width: 3; } 50% { stroke-width: 7; } }
@keyframes pa-speed { 0% { opacity: 0; transform: translateX(20px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(-24px); } }
@keyframes pa-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .pa.pa-armed .pa-trail { stroke-dasharray: 100; stroke-dashoffset: 100; }
  .pa.pa-armed .pa-drive,
  .pa.pa-armed .pa-pop,
  .pa.pa-armed .pa-dot { opacity: 0; }
  .pa .pa-drive, .pa .pa-pop, .pa .pa-dot, .pa .pa-spark { transform-box: fill-box; transform-origin: center; }

  .pa.is-in .pa-trail { animation: pa-trail 2.6s cubic-bezier(.45, .05, .25, 1) .25s forwards; }
  .pa.is-in .pa-drive { animation: pa-drive 1.9s cubic-bezier(.2, .7, .2, 1) .45s both; }
  .pa.is-in .pa-pop { animation: pa-pop .55s cubic-bezier(.3, 1.5, .5, 1) 2.6s both; }
  .pa.is-in .pa-dot { animation: pa-dot .4s ease-out both; }
  .pa.is-in .pa-dot1 { animation-delay: .3s; }
  .pa.is-in .pa-dot2 { animation-delay: .9s; }
  .pa.is-in .pa-dot3 { animation-delay: 1.5s; }
  .pa.is-in .pa-dot4 { animation-delay: 2.1s; }
  .pa.is-in .pa-dot5 { animation-delay: 2.6s; }
  .pa.is-in .pa-speed { animation: pa-speed .9s ease-out .5s 2 both; }
  .pa.is-in .pa-spark { animation: pa-spark 2.4s ease-in-out .4s 3; }
  .pa.is-in .pa-pulse { animation: pa-pulse 1.2s ease-in-out .4s 4; }
  .pa.pa-armed .pa-notif { opacity: 0; }
  .pa.is-in .pa-notif { animation: pa-rise .6s ease-out .3s both; }
}

@media print {
  .pa.pa-armed .pa-trail { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .pa.pa-armed .pa-drive, .pa.pa-armed .pa-pop, .pa.pa-armed .pa-dot, .pa.pa-armed .pa-notif { opacity: 1 !important; animation: none !important; transform: none !important; }
}

/* ======================================================================================================
   /how-it-works layout
   ====================================================================================================== */

/* wide "payment to release" journey over the 5 flow cards */
.pa.pa-journey { margin: 22px 0 14px; }
/* wide review picture over the 6 review cards */
.pa.pa-review { margin: 6px 0 18px; }

/* a picture beside every buyer + seller step */
.hiw-step-art { width: 100%; max-width: 204px; justify-self: end; align-self: center; }
@media (min-width: 761px) {
  .hiw-step.has-art { grid-template-columns: 64px minmax(0, 1fr) 196px; }
  .hiw-step.has-art .hiw-step-art { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) {
  .hiw-step.has-art .hiw-step-art { grid-column: 2; grid-row: 2; justify-self: start; max-width: 210px; margin-top: 2px; }
}

/* the two tab buttons read like segmented pills with a little picture */
.hiw-tab:has(.pa-tab-ico) { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; }
.hiw-tab .pa-tab-ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* bigger, friendlier icon chips on the process cards */
.hiw-process-card-icon.pa-chip { width: 52px !important; height: 52px !important; display: grid !important; place-items: center !important; }
.hiw-process-card-icon.pa-chip svg { width: 26px !important; height: 26px !important; }
html[data-theme="light"] .hiw-process-card-icon.pa-chip:not(#pks-x) { background: #FBF3DC !important; color: #8A6410 !important; border: 1px solid #F1DFA8 !important; }
html:not([data-theme="light"]) .hiw-process-card-icon.pa-chip:not(#pks-x) { background: #3A3122 !important; color: #E7BE52 !important; border: 1px solid #5A4718 !important; }


/* ---- status accents (2026-10-12, owner: "bring in our other colours here and there") ------------------
   Not a recolour of the whole drawing: gold stays the brand. Only the parts that MEAN something change:
   a tick in a badge = done / safe (green), a padlock = money locked safe (green), a tracked route (blue),
   and on the home "What Pakstoor stops" cards the gap side turns red. */
.pa circle.fg:has(+ path.n.sk) { fill: var(--a-ok); }
.pa circle.fg + path.n.sk { stroke: #FFFFFF; }
.pa path.n[d^="M-5-2v-4a5 5"] { stroke: var(--a-ok); }
.pa path.n[d^="M-5-2v-4a5 5"] + rect { fill: var(--a-ok); }
.pa .pa-route { stroke: var(--a-info); }
.pa.pa-ok .fg, .pa .pa-ok .fg { fill: var(--a-ok); }
.stops-card-bad .pa .fg { fill: var(--a-bad); }
.stops-card-bad .pa .fgl { fill: var(--a-badl); }
.stops-card-bad .pa .sg { stroke: var(--a-bad); }
.stops-card-bad .pa .fgd { fill: var(--a-bad); }