/* pb.css — the procedures' shared look (prefix pb-), for any page and any ground: the icon, the area token, the badge, the
   card, the rhythm chip and "+N more". It carries its own materials (the kit's cream paper, plum clay and gold, as literal
   values), so it reads the same on gold, cream and plum sheets and on the pages still in their old dress. Pair with js/pb.js. */
.pb-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* each area keeps a quiet colour of its own: only a dot or a soft glow, never a fill (add .pb-tone + data-area for --pb-c) */
:where(.pb-badge,.pb-card,.pb-tone){--pb-c:#d99a14}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="people"]{--pb-c:#e0718f}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="tech"]{--pb-c:#4f7fd8}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="money"]{--pb-c:#2f9a62}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="growth"]{--pb-c:#8aa52c}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="ops"]{--pb-c:#e08534}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="agents"]{--pb-c:#d9a514}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="sales"]{--pb-c:#e35f4f}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="company"]{--pb-c:#7b68d6}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="management"]{--pb-c:#23998f}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="vehicles"]{--pb-c:#3f74c4}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="documents"]{--pb-c:#b4875a}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="property"]{--pb-c:#c8604f}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="support"]{--pb-c:#2fa3c2}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="personal"]{--pb-c:#b96fd0}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="agreements"]{--pb-c:#9467d8}
:where(.pb-badge,.pb-card,.pb-tone)[data-area="legal"]{--pb-c:#a8862a}

/* the area token: a plum clay bead with a gold glyph (the logo's own pairing) and the area's dot on its shoulder */
.pb-ic{position:relative;display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;color:#ffd75e;
  background:radial-gradient(120% 100% at 30% 8%,#ad2a6d 0%,#7c1046 46%,#560726 100%);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.34),inset 0 -3px 5px rgba(30,0,14,.42),0 5px 10px -4px rgba(70,8,36,.55);
  transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.pb-ic::after{content:"";position:absolute;inset-inline-end:-1px;top:-1px;width:31%;height:31%;min-width:7px;min-height:7px;border-radius:50%;
  background:var(--pb-c,#d99a14);box-shadow:0 0 0 2px #fff6e0,0 1px 2px rgba(70,8,36,.35)}
.pb-ic .pb-i{width:17px;height:17px;stroke-width:1.9;filter:drop-shadow(0 1px 0 rgba(40,0,18,.35))}

/* the badge: a cream paper pill that lifts, its token turning a little */
.pb-badge{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-width:0;padding-block:5px; padding-inline:5px 17px;border-radius:999px;
  background:linear-gradient(180deg,#fffcf4 0%,#fff1d1 100%);color:#4a0a28;text-decoration:none;font:600 .9375rem/1.25 "Instrument Sans",system-ui,sans-serif;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(160,100,20,.1),0 10px 18px -12px rgba(90,40,10,.5),0 2px 5px -2px rgba(90,40,10,.22);
  transition:transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.pb-badge:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(160,100,20,.1),0 16px 24px -14px rgba(90,40,10,.6),0 3px 7px -3px rgba(90,40,10,.25)}
.pb-badge:hover .pb-ic{transform:rotate(-12deg) scale(1.07)}
.pb-badge:active{transform:translateY(1px) scale(.99)}
.pb-badge:focus-visible{outline:3px solid #a31f62;outline-offset:3px;border-radius:999px}
.pb-tx{display:flex;flex-direction:column;min-width:0}
.pb-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4a0a28}
.pb-bh{font:500 .75rem/1.25 "Instrument Sans",system-ui,sans-serif;color:#7a4a62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-badge.pb-sm{gap:8px;padding-block:3px; padding-inline:3px 13px;font-size:.8125rem}
.pb-badge.pb-sm .pb-ic{width:24px;height:24px}
.pb-badge.pb-sm .pb-ic .pb-i{width:14px;height:14px}
.pb-badge.pb-sm .pb-ic::after{min-width:6px;min-height:6px;box-shadow:0 0 0 1.5px #fff6e0}
.pb-badge.pb-lg{gap:12px;padding-block:6px; padding-inline:6px 20px;font-size:1.0625rem}
.pb-badge.pb-lg .pb-ic{width:42px;height:42px}
.pb-badge.pb-lg .pb-ic .pb-i{width:22px;height:22px}

/* the rhythm chip: a word and its icon pressed softly into the paper — gold for a calendar, plum for an event, quiet for "on request" */
.pb-rh{display:inline-flex;align-items:center;gap:6px;flex:none;padding-block:5px; padding-inline:8px 11px;border-radius:999px;white-space:nowrap;
  font:650 .75rem/1.15 "Instrument Sans",system-ui,sans-serif;letter-spacing:.01em;color:#64082e;background:rgba(100,8,46,.07);box-shadow:inset 0 1px 2px rgba(100,8,46,.1)}
.pb-rh .pb-i{width:14px;height:14px;color:#b07a06;stroke-width:2}
.pb-rh[data-rh="event"] .pb-i{color:#a31f62}
.pb-rh[data-rh="ask"] .pb-i{color:#7a4a62}

/* the card: paper, the token (or the clay picture with the token on its corner), the title, one line, the rhythm and a meta line */
.pb-card{position:relative;display:flex;gap:16px;align-items:flex-start;min-width:0;padding-block:18px; padding-inline:18px 20px;border-radius:26px;text-decoration:none;color:#2a0a1c;
  background:linear-gradient(180deg,#fffaf0 0%,#fff3d6 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(160,100,20,.1),0 22px 40px -24px rgba(90,40,10,.48),0 4px 10px -4px rgba(90,40,10,.18);
  transition:transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .35s}
.pb-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(160,100,20,.1),0 30px 46px -24px rgba(90,40,10,.55),0 6px 12px -5px rgba(90,40,10,.2)}
.pb-card:hover .pb-ic{transform:rotate(-12deg) scale(1.06)}
.pb-card:active{transform:translateY(0) scale(.995)}
.pb-card:focus-visible{outline:3px solid #a31f62;outline-offset:3px;border-radius:26px}
.pb-card .pb-ic{width:44px;height:44px}
.pb-card .pb-ic .pb-i{width:22px;height:22px}
.pb-cpic{position:relative;flex:none;display:block;width:68px;height:68px}
.pb-cpic img{width:100%;height:100%;object-fit:cover;border-radius:20px;background:#fdebc4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 10px 16px -10px rgba(90,40,10,.55);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.pb-cpic .pb-ic{position:absolute;inset-inline-end:-8px;bottom:-8px;width:30px;height:30px;box-shadow:inset 0 1.5px 1px rgba(255,255,255,.34),inset 0 -3px 5px rgba(30,0,14,.42),0 0 0 3px #fff6e0,0 6px 10px -4px rgba(70,8,36,.5)}
.pb-cpic .pb-ic .pb-i{width:16px;height:16px}
.pb-cpic .pb-ic::after{display:none}
.pb-card.pb-has-pic:hover .pb-cpic img{transform:rotate(-3deg) scale(1.04)}
.pb-card.pb-has-pic:hover .pb-ic{transform:none}
.pb-cb{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.pb-ck{font:650 .6875rem/1.2 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#811347}
.pb-ct{font:700 1.0625rem/1.22 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.015em;color:#64082e;text-wrap:balance}
.pb-cs{font:400 .9rem/1.45 "Instrument Sans",system-ui,sans-serif;color:#5b2a44;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pb-cm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:4px}
.pb-cx{font:500 .78rem/1.3 "Instrument Sans",system-ui,sans-serif;color:#7a4a62}
.pb-cf{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:6px}

/* "+N more": one flow of items; a paper pill with a plum clay bead reveals the rest in place */
.pb-more{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.pb-list{display:flex;flex-wrap:wrap;gap:10px;min-width:0;max-width:100%;margin:0;padding:0;list-style:none}
.pb-li{display:flex;min-width:0;max-width:100%}
.pb-list.pb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px;width:100%}
.pb-list.pb-grid>.pb-li>*{flex:1}
.pb-list.pb-anim{transition:height .5s cubic-bezier(.2,.8,.2,1)}
.pb-in{animation:pb-in .6s cubic-bezier(.3,1.4,.5,1) both}
@keyframes pb-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.pb-more-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding-block:0; padding-inline:6px 20px;border-radius:999px;font:650 .9375rem/1 "Bricolage Grotesque",system-ui,sans-serif;
  color:#64082e;background:linear-gradient(180deg,#fffcf4 0%,#fff1d1 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(160,100,20,.1),0 10px 18px -12px rgba(90,40,10,.5),0 2px 5px -2px rgba(90,40,10,.22);
  transition:transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.pb-mi{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#ffd75e;background:radial-gradient(120% 100% at 30% 8%,#ad2a6d 0%,#7c1046 46%,#560726 100%);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.34),inset 0 -3px 5px rgba(30,0,14,.42);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.pb-mi .pb-i{width:16px;height:16px;stroke-width:2.4}
.pb-more-btn:hover{transform:translateY(-2px)}
.pb-more-btn:hover .pb-mi{transform:rotate(90deg)}
.pb-more-btn[aria-expanded="true"]:hover .pb-mi{transform:rotate(-90deg)}
.pb-more-btn:active{transform:translateY(1px) scale(.98)}
.pb-more-btn:focus-visible{outline:3px solid #a31f62;outline-offset:3px;border-radius:999px}
@media (prefers-reduced-motion:reduce){.pb-badge,.pb-card,.pb-ic,.pb-mi,.pb-more-btn,.pb-cpic img{transition:none}.pb-badge:hover,.pb-card:hover,.pb-more-btn:hover{transform:none}.pb-in{animation:none}}