/* CareCraft body mark — styles for /assets/carecraft-body.js
   Colours fall back to the brand palette; override the custom properties to re-theme
   (e.g. on a pine panel: --ccb-dim: rgba(255,255,255,.28); --ccb-ink: #fff). */
.ccb, .ccb-glyph{
  --ccb-dim: var(--hair, #E1E8E3);
  --ccb-ink: var(--pine, #0E3B2E);
  --ccb-ball: var(--amber-bright, #D07A24);
  --ccb-text: var(--ink, #101915);
  --ccb-mute: var(--mute, #97A39B);
  --ccb-soft: var(--soft, #5A6A60);
}
.ccb-svg{display:block;width:100%;height:auto;overflow:visible}
.ccb-base{stroke:var(--ccb-dim)}
.ccb-seg{stroke:var(--ccb-ink)}
.ccb-ball{fill:var(--ccb-ball)}
.ccb.is-fade .ccb-seg{opacity:0;transition:opacity .45s ease}
.ccb-glyph{width:100%;height:100%}
.ccb-has-glyph{display:inline-block;line-height:0}

/* figure: body in the middle, parts 01–03 down the left, 06–04 down the right (the line's own order) */
.ccb-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,44%) minmax(0,1fr);grid-template-rows:repeat(3,1fr);column-gap:clamp(12px,3vw,28px);align-items:center}
.ccb-stage .ccb-svg{grid-column:2;grid-row:1/4;align-self:stretch;max-height:100%}
.ccb-lab{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;color:var(--ccb-mute);transition:color .35s;font-family:var(--disp,'Inter Tight',system-ui,sans-serif)}
.ccb-lab .ccb-n{font-style:normal;font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.06em;align-self:start;padding-top:3px;position:relative;padding-left:14px}
.ccb-lab .ccb-n::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;background:currentColor;transition:background .35s,transform .35s}
.ccb-lab .ccb-n,.ccb-lab .ccb-t{grid-row:1}
.ccb-lab .ccb-t{font-weight:400;font-size:clamp(15px,1.4vw,18px);letter-spacing:-.02em;line-height:1.15}
.ccb-lab.is-done{color:var(--ccb-text)}
.ccb-lab.is-on{color:var(--ccb-text)}
.ccb-lab.is-on .ccb-n{color:var(--ccb-ball)}
.ccb-lab.is-on .ccb-n::before{background:var(--ccb-ball);transform:scale(1.35)}
.ccb-lab.is-done .ccb-n{color:var(--ccb-ink)}
.ccb.is-fade .ccb-lab{transition:color .45s}
/* placement: left column top→bottom 01 02 03 (head, arm, leg); right column 06 05 04 */
.ccb-lab-1{grid-column:1;grid-row:1;align-self:start;margin-top:4%}
.ccb-lab-2{grid-column:1;grid-row:2}
.ccb-lab-3{grid-column:1;grid-row:3;align-self:end;margin-bottom:2%}
.ccb-lab-6{grid-column:3;grid-row:1;align-self:start;margin-top:4%}
.ccb-lab-5{grid-column:3;grid-row:2}
.ccb-lab-4{grid-column:3;grid-row:3;align-self:end;margin-bottom:2%}
.ccb-lab-1,.ccb-lab-2,.ccb-lab-3{justify-self:end;text-align:right;grid-template-columns:1fr auto}
.ccb-lab-1 .ccb-n,.ccb-lab-2 .ccb-n,.ccb-lab-3 .ccb-n{grid-column:2;padding-left:0;padding-right:14px}
.ccb-lab-1 .ccb-n::before,.ccb-lab-2 .ccb-n::before,.ccb-lab-3 .ccb-n::before{left:auto;right:0}
.ccb-lab-1 .ccb-t,.ccb-lab-2 .ccb-t,.ccb-lab-3 .ccb-t{grid-column:1}
.ccb-lab-4 .ccb-t,.ccb-lab-5 .ccb-t,.ccb-lab-6 .ccb-t{grid-column:2}
/* unlabelled figure: just the body */
.ccb:not(.ccb-labelled) .ccb-stage{display:block}

@media(max-width:620px){
  .ccb-stage{grid-template-columns:1fr 1fr;grid-template-rows:auto;row-gap:14px;column-gap:18px}
  .ccb-stage .ccb-svg{grid-column:1/-1;grid-row:auto;order:0;width:min(62%,260px);margin:0 auto 10px}
  .ccb-lab{grid-column:auto;grid-row:auto;justify-self:stretch;text-align:left;grid-template-columns:auto 1fr;margin:0}
  .ccb-lab .ccb-n{grid-column:1;padding-left:14px;padding-right:0}
  .ccb-lab .ccb-n::before{left:0;right:auto}
  .ccb-lab .ccb-t{grid-column:2}
  .ccb-lab-1{order:1}.ccb-lab-2{order:2}.ccb-lab-3{order:3}.ccb-lab-4{order:4}.ccb-lab-5{order:5}.ccb-lab-6{order:6}
}