/* Atelier: the Studio's boutique layer. Warm paper and ink, one terracotta accent, hairlines, serif display, mono
   small-caps labels, and motion that settles like ink rather than flashing like a dashboard. Loaded after the page
   stylesheets and before responsive.css, it refines through tokens and never restructures a page. */
:root{
  --coral:#b94f39;            /* the one accent for lines, dots and borders (4.3:1 on paper) */
  --action:#ac402d;           /* filled buttons and accent text (5.2:1 on paper) */
  --gold:#94733a;             /* money: bars and dots */
  --gold-text:#7a5f2e;        /* money as text */
  --alert-text:#9f3e31;       /* late and overdue */
  --muted-readable:#5f5a52;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-1:160ms;--dur-2:280ms;--dur-3:560ms;--dur-4:900ms;
}

/* Focus: a ring with at least 3:1 contrast everywhere (the earlier yellow ring was too faint on paper). */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--action);outline-offset:3px}

/* Buttons lift a touch on hover and settle when pressed. */
.primary,.quiet,.danger,.row-action,.flow-link{transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.primary:hover{background:#93351f;border-color:#93351f;transform:translateY(-1px);box-shadow:0 6px 16px rgba(147,53,31,.18)}
.primary:active{transform:none;box-shadow:none}
.quiet:hover{border-color:var(--ink)}

/* Dialogs rise into place over a softly dimmed page; toasts slide up. */
dialog[open]{animation:atelier-rise var(--dur-3) var(--ease-out) both}
dialog[open]::backdrop{animation:atelier-fade var(--dur-2) ease both}
@keyframes atelier-rise{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes atelier-fade{from{opacity:0}}
#toast{transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-3) var(--ease-out)}

/* Figures in serif use lining numerals; accent and money text use their readable shades. */
.journey-figures dd,.invoice-amount,.invoice-total strong,.score,.metric strong{font-variant-numeric:lining-nums}
.journey-state.late,.invoice-row.overdue .invoice-state,.invoice-error,.link-error,.partner-directory-item em.alert{color:var(--alert-text)}
.invoice-row.draft .invoice-state{color:var(--gold-text)}
.journey-legend,.partner-directory-item em{color:#6b655b}

/* Content cards say when a piece is with the brand. */
.flow-brand{display:inline-flex;align-items:center;gap:6px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--gold-text)}
.flow-brand::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.flow-brand.late{color:var(--alert-text)}
.flow-brand.late::before{background:var(--alert-text)}

/* ---- Journey motion (atelier-motion.js). When a company's journey first appears, its sections settle in order,
   the stage line draws to the current stage and its dot pulses three times, the money bar fills, and deliverable
   dots fill in step order. Delays are offset by --jm-since, so a re-render continues the motion instead of restarting. */
.journey.jm-enter>*{animation:jm-rise var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--jm-i,0) * 70ms + var(--jm-since,0ms))}
.journey.jm-enter .deal-stage::after{animation:jm-draw 1s var(--ease-out) both;animation-delay:calc(250ms + var(--jm-since,0ms))}
.journey.jm-enter .deal-stage [aria-current="step"] i{animation:jm-pulse 1.5s ease-out 3;animation-delay:calc(900ms + var(--jm-since,0ms))}
.journey.jm-enter .journey-bar{animation:jm-fill 1.1s var(--ease-out) both;animation-delay:calc(300ms + var(--jm-since,0ms))}
.journey.jm-enter .journey-dots i:is(.done,.money,.paid){animation:jm-dot .4s var(--ease-spring) both;animation-delay:calc(var(--jm-d,0) * 45ms + 450ms + var(--jm-since,0ms))}
.invoice-row.jm-stamp .invoice-stamp{animation:jm-stamp .55s var(--ease-spring) both;animation-delay:var(--jm-stamp-since,0ms)}
.deal-stage.jm-moving::after{animation:jm-stage .7s var(--ease-out) both;animation-delay:var(--jm-move-since,0ms)}
.deal-stage.jm-moving [aria-current="step"] i{animation:jm-dot .45s var(--ease-spring) both;animation-delay:calc(var(--jm-move-since,0ms) + 250ms)}
@keyframes jm-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes jm-draw{from{width:0}}
@keyframes jm-pulse{0%{box-shadow:0 0 0 0 rgba(185,79,57,.45)}70%{box-shadow:0 0 0 10px rgba(185,79,57,0)}100%{box-shadow:0 0 0 0 rgba(185,79,57,0)}}
@keyframes jm-fill{from{clip-path:inset(0 100% 0 0)}}
@keyframes jm-dot{from{opacity:0;transform:scale(0)}}
@keyframes jm-stamp{from{opacity:0;transform:rotate(-6deg) scale(1.9)}}
@keyframes jm-stage{from{width:calc(var(--jm-from,0) * 20%)}}

@media(prefers-reduced-motion:reduce){
  dialog[open],dialog[open]::backdrop,.journey.jm-enter>*,.journey.jm-enter *,.invoice-row.jm-stamp .invoice-stamp,.deal-stage.jm-moving::after,.deal-stage.jm-moving i{animation:none!important}
  .primary:hover{transform:none}
}