/* public/ch-art.css — Cross Hub line art + editorial style (with /ch-art.js). Demo: /art-kit.html (team only).
   Brand colours only (Cross Hub Brand Guidelines v1.0). Clean, not bold: thin plum lines, no blur, no gradients,
   no hard shadows here (those stay on the one hero card and primary buttons). Every class starts with .cha-.
   Motion is opt-in (.cha--float, .cha--draw) and runs only when the viewer has not asked for reduced motion.
   Fraunces italic is needed for the accent word; /ch-art.js adds it (Poppins comes from the page). */
/* The Fraunces face is added by /ch-art.js without blocking (no @import here: an import chain held back this whole
   stylesheet). A page may also link it in its <head> with a preconnect to fonts.googleapis.com / fonts.gstatic.com. */

:root {
  --cha-ink: #5B1A42;            /* Plum Jam: the line and the text */
  --cha-ink-soft: #6E4A60;
  --cha-cream: #FFF9E9;          /* Fresh Cream: the ground */
  --cha-bubblegum: #F9C6D4;      /* the signature */
  --cha-flamingo: #F6AEC2;       /* wallet and account */
  --cha-butter: #FBF280;         /* chat and pending */
  --cha-lilac: #C7B6F5;          /* approvals and info */
  --cha-lime: #B8D94A;           /* live ads and success */
  --cha-watermelon: #F6AEC2;     /* sparks and needs action */
  --cha-line: rgba(91, 26, 66, .14);
  --cha-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cha-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* accent picker for pills, sparkles, waves, marks (one per layout, two at most). It inherits, so it can sit on a card */
.cha-a--bubblegum { --cha-a: var(--cha-bubblegum); } .cha-a--flamingo { --cha-a: var(--cha-flamingo); }
.cha-a--butter { --cha-a: var(--cha-butter); } .cha-a--lilac { --cha-a: var(--cha-lilac); }
.cha-a--lime { --cha-a: var(--cha-lime); } .cha-a--watermelon { --cha-a: var(--cha-watermelon); }
.cha-a--cream { --cha-a: var(--cha-cream); } .cha-a--white { --cha-a: #FFFFFF; } .cha-a--plum { --cha-a: var(--cha-ink); }

/* 1. Drawings --------------------------------------------------------------------------------------------- */
.cha { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; flex: none; color: var(--cha-ink); overflow: visible; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cha-on-plum { --cha-ink: var(--cha-cream); --cha-line: rgba(255, 246, 230, .22); }   /* cream ink on a plum card */
.cha-on-plum .cha { color: var(--cha-cream); }
.cha-on-plum .cha-paper { fill: var(--cha-plum-card, #5B1A42); }   /* white sticker fills take the plum of the card, so the cream line reads */
/* a drawing in a soft round "spot" (empty states, feature cards) */
.cha-spot { display: inline-grid; place-items: center; width: var(--cha-spot, 132px); aspect-ratio: 1; border-radius: 50%; background: var(--cha-cream); flex: none; }
.cha-spot > .cha { width: 82%; height: auto; }
/* the small doodle in a feature / shortcut card corner */
.cha-doodle { position: absolute; right: 10px; bottom: 6px; width: 72px; height: auto; pointer-events: none; opacity: .95; }
.cha-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 2. Editorial type: one display headline per screen, ONE accent word ------------------------------------ */
/* font-family is !important: classic pages (the client portal index.html) load /crosshub.css, whose h1-h6 rule forces
   the round UI face with !important; without this the editorial headline would fall back to Schibsted Grotesk there. */
.cha-display { margin: 0; max-width: 22ch; font-family: var(--cha-display) !important; font-weight: 900; font-variation-settings: 'SOFT' 100, 'WONK' 0; font-optical-sizing: auto;
  font-size: clamp(30px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -.02em; color: var(--cha-ink); text-wrap: balance; overflow-wrap: anywhere; }
.cha-display--sm { font-size: clamp(26px, 3vw, 34px); line-height: 1.08; }     /* Fraunces only at 24 px and up */
.cha-display--lg { font-size: clamp(36px, 6.4vw, 88px); line-height: .95; }
/* the accent word: Plum italic over a hand-drawn Bubblegum swash (Bubblegum letters on cream would not be readable) */
.cha-display em { position: relative; z-index: 0; font-style: italic; font-weight: 900; white-space: nowrap; color: var(--cha-ink); padding: 0 .06em; }
.cha-display em::after { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.06em; bottom: .0em; height: .46em; background: var(--cha-a, var(--cha-bubblegum));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 26C40 14 92 12 140 13s48 2 56 4c-36 4-104 7-140 11-18 2-34 4-44 6' stroke='%23000' stroke-width='16' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 26C40 14 92 12 140 13s48 2 56 4c-36 4-104 7-140 11-18 2-34 4-44 6' stroke='%23000' stroke-width='16' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* on a plum card the accent word itself turns Bubblegum (Cream or Bubblegum on Plum) */
.cha-on-plum .cha-display, .cha-display.cha-on-plum { color: var(--cha-cream); }
.cha-on-plum .cha-display em, .cha-display.cha-on-plum em { color: var(--cha-bubblegum); }
.cha-on-plum .cha-display em::after, .cha-display.cha-on-plum em::after { content: none; }
.cha-kicker { margin: 0 0 10px; font: 700 12px/1.2 var(--cha-body); letter-spacing: .12em; text-transform: uppercase; color: var(--cha-ink-soft); }
.cha-lede { margin: 12px 0 0; max-width: 60ch; font: 400 16px/1.6 var(--cha-body); color: var(--cha-ink-soft); }
.cha-on-plum .cha-kicker, .cha-on-plum .cha-lede { color: rgba(255, 246, 230, .82); }

/* word marks inside running text: a scribbled underline or a loop around ONE word */
.cha-mark, .cha-circle { position: relative; z-index: 0; white-space: nowrap; }
.cha-mark::after { content: ""; position: absolute; z-index: -1; left: -.05em; right: -.05em; bottom: -.2em; height: .46em; background: var(--cha-a, var(--cha-flamingo));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 12c40-5 102-7 192-3M30 19c40-3 92-4 140-2' stroke='%23000' stroke-width='4.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 12c40-5 102-7 192-3M30 19c40-3 92-4 140-2' stroke='%23000' stroke-width='4.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.cha-circle { padding: 0 .28em; margin: 0 -.06em; }
.cha-circle::after { content: ""; position: absolute; z-index: -1; left: -.02em; right: -.02em; top: -.24em; bottom: -.28em; background: var(--cha-a, var(--cha-flamingo));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M24 16C60 4 150 4 186 22s-6 50-86 52S6 62 8 42 52 10 120 8' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M24 16C60 4 150 4 186 22s-6 50-86 52S6 62 8 42 52 10 120 8' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* 3. Pills: label chips, thin plum line; tilt them only as decoration ------------------------------------- */
.cha-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 14px; border-radius: 999px; border: 1.5px solid var(--cha-ink);
  background: var(--cha-a, var(--cha-bubblegum)); color: var(--cha-ink); font: 600 13px/1.2 var(--cha-body); white-space: nowrap; transform: rotate(var(--cha-tilt, 0deg)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cha-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cha-ink); flex: none; }
.cha-pill .cha-tick { flex: none; margin-left: -3px; }
.cha-pill--soft { border-color: transparent; }
.cha-pills { display: flex; flex-wrap: wrap; gap: 10px 8px; align-items: center; margin: 0; padding: 0; list-style: none; }

/* 4. Asterisk sparkles (flat, 8 arms) and the wave ribbon divider ------------------------------------------ */
.cha-ast { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; background: var(--cha-a, var(--cha-butter)); flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4' stroke='%23000' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4' stroke='%23000' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cha-wave { display: block; height: 14px; margin: 24px 0; border: 0; background: var(--cha-a, var(--cha-lilac));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M0 7c5-6 15-6 20 0s15 6 20 0' stroke='%23000' stroke-width='3.6' fill='none'/%3E%3C/svg%3E") 0 50% / 40px 14px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M0 7c5-6 15-6 20 0s15 6 20 0' stroke='%23000' stroke-width='3.6' fill='none'/%3E%3C/svg%3E") 0 50% / 40px 14px repeat-x;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* 5. Journey: pills joined by dotted bounce arcs (Calendar -> Approval -> Live). Stacks when narrow ----------- */
.cha-journey-wrap { container-type: inline-size; min-width: 0; }
.cha-journey { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 18px; margin: 0; padding: 22px 0 0; list-style: none; color: var(--cha-ink); }
.cha-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.cha-step + .cha-step { margin-left: 74px; }
.cha-step + .cha-step::before { content: ""; position: absolute; right: 100%; top: -17px; width: 62px; height: 30px; margin-right: 6px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 30' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 27Q30-6 57 26' stroke-width='2.4' stroke-dasharray='.1 5.6'/%3E%3Cpath d='M51.5 22.6l5.8 3.8-6.8 1.4' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 30' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 27Q30-6 57 26' stroke-width='2.4' stroke-dasharray='.1 5.6'/%3E%3Cpath d='M51.5 22.6l5.8 3.8-6.8 1.4' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.cha-step .cha-pill { min-height: 34px; padding: 5px 16px; }
.cha-step.is-next .cha-pill { border-color: var(--cha-line); border-width: 1px; background: #FFFFFF; color: var(--cha-ink-soft); }
.cha-step.is-now .cha-pill { font-weight: 700; }
.cha-step-sub { max-width: 16ch; font: 500 12px/1.35 var(--cha-body); color: var(--cha-ink-soft); text-align: center; }
.cha-on-plum .cha-step-sub { color: rgba(255, 246, 230, .8); }
@container (max-width: 480px) {
  .cha-journey { flex-direction: column; padding-top: 0; row-gap: 0; }
  .cha-step { flex-direction: row; gap: 10px; }
  .cha-step-sub { max-width: none; text-align: left; }
  .cha-step + .cha-step { margin: 40px 0 0; }
  .cha-step + .cha-step::before { right: auto; left: 12px; top: -38px; width: 26px; height: 36px; margin: 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 36' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3Q22 18 8 33' stroke-width='2.4' stroke-dasharray='.1 5.4'/%3E%3Cpath d='M13.7 31.3L8 33l1.4-5.9' stroke-width='1.8'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 36' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3Q22 18 8 33' stroke-width='2.4' stroke-dasharray='.1 5.4'/%3E%3Cpath d='M13.7 31.3L8 33l1.4-5.9' stroke-width='1.8'/%3E%3C/svg%3E"); }
}

/* 6. Surfaces: soft curved section edge, faint grid corner, a down-arrow step list ---------------------------- */
.cha-edge { border-bottom-left-radius: 50% clamp(22px, 4vw, 48px); border-bottom-right-radius: 50% clamp(22px, 4vw, 48px); }
.cha-edge--top { border-top-left-radius: 50% clamp(22px, 4vw, 48px); border-top-right-radius: 50% clamp(22px, 4vw, 48px); }
.cha-grid { position: relative; isolation: isolate; }
.cha-grid::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: min(240px, 55%); height: min(200px, 100%); pointer-events: none; border-top-right-radius: inherit;
  background-image: linear-gradient(var(--cha-line) 1px, transparent 1px), linear-gradient(90deg, var(--cha-line) 1px, transparent 1px); background-size: 18px 18px; background-position: right -1px top -1px;
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 0, rgba(0, 0, 0, .55) 38%, transparent 72%); mask-image: radial-gradient(circle at 100% 0, #000 0, rgba(0, 0, 0, .55) 38%, transparent 72%); }
.cha-grid--left::before { right: auto; left: 0; border-top-right-radius: 0; border-top-left-radius: inherit; background-position: left -1px top -1px;
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 0, rgba(0, 0, 0, .55) 38%, transparent 72%); mask-image: radial-gradient(circle at 0 0, #000 0, rgba(0, 0, 0, .55) 38%, transparent 72%); }
.cha-steps { margin: 0; padding: 0; list-style: none; counter-reset: cha-step; display: flex; flex-direction: column; gap: 12px; }
.cha-steps > li { position: relative; padding-left: 34px; font: 400 15px/1.5 var(--cha-body); color: var(--cha-ink); }
.cha-steps > li::before { content: ""; position: absolute; left: 4px; top: 2px; width: 18px; height: 22px; background: var(--cha-a, var(--cha-flamingo));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5c-.3 5.4.2 11 .1 16.4M3.6 13.6l5.5 5.6 5.4-5.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5c-.3 5.4.2 11 .1 16.4M3.6 13.6l5.5 5.6 5.4-5.8'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 7. Motion, opt-in and gentle. Nothing moves for people who asked for less motion ----------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .cha--float { animation: cha-float 6s ease-in-out infinite; transform-origin: 50% 100%; }
  .cha--draw path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cha-draw 1.5s .15s cubic-bezier(.45, 0, .2, 1) forwards; }
  .cha--draw path[fill] { opacity: 0; animation: cha-fade .5s 1.1s ease-out forwards; }
  .cha-twinkle { animation: cha-twinkle 3.2s ease-in-out infinite; }
}
@keyframes cha-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes cha-draw { to { stroke-dashoffset: 0; } }
@keyframes cha-fade { to { opacity: 1; } }
@keyframes cha-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.82) rotate(22deg); } }

/* 8. Print: everything in its final state, decoration-only pieces can opt out with .cha-noprint ---------------- */
@media print {
  .cha, .cha path { animation: none !important; }
  .cha--draw path[pathLength] { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .cha--draw path[fill] { opacity: 1 !important; }
  .cha-noprint { display: none !important; }
  .cha-pill { transform: none; }
}