/* ═════════════════════════════════════════════════════════════════════════════
   suppliers.css — what only the supplier page needs. Loaded non-blocking after
   /v22/v22.css. Tokens are declared in for-suppliers.html's critical <style>.

   ⚠ SPLIT FROM v22.css FOR GATE 12: "no unused CSS above 10KB". The Drive tree,
   the spend chart and the job P&L are used here and nowhere else.
   ALL USER-FACING COPY IS DRAFT (Rule 5).
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── THE DRIVE TREE. Rows that indent by depth rather than by a hand-set pixel
      value per row. ⚠ THE ARTEFACT SETS `padding:8px 0 8px NaNpx` ON FOUR OF
      THESE — a literal NaN that survived from the canvas. Depth is a data
      attribute here so the value cannot go non-numeric again. ── */
.tree{display:flex;flex-direction:column;gap:2px}
.leaf{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px dotted rgba(31,58,48,.12);min-width:0}
.leaf--folder{padding:9px 0;border-bottom-color:rgba(31,58,48,.14)}
.leaf[data-depth="1"]{padding-left:18px}
.leaf[data-depth="2"]{padding-left:36px}
.leaf__ico{width:15px;height:18px;background:var(--chrome);border:1px solid rgba(31,58,48,.2);flex:none}
.leaf__n{flex:1;font-size:13px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.leaf--folder .leaf__n{font-size:13.5px;color:var(--ink-panel)}
.leaf__m{font-size:12px;color:var(--ink-mute);white-space:nowrap;flex:none}
.leaf__m--amber{color:var(--amber)}
/* ⚠ at 390px a filename like "2026-09-12 Hall — quote v3, accepted.pdf" and its
   meta cannot both sit on one line. The meta drops beneath rather than the type
   shrinking — §5's "nothing in a window frame goes below 12px on mobile". */
@media (max-width:560px){
  .leaf{flex-wrap:wrap}
  .leaf__m{width:100%;padding-left:24px}
  .leaf__n{flex:1 1 100%}
}
.tree__note{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);padding-top:8px}

/* ── THE PRODUCT PRICE LIST. ⚠ These £ figures STAY. A6: only I Do's own plan
      prices are suppressed; a caterer's product list is the product story. ── */
.prices{display:flex;flex-direction:column;gap:9px}
.prices .row{padding:9px 0}
.prices__foot{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);padding-top:2px}

/* ── THE VOICE PANEL ─────────────────────────────────────────────────────────── */
.voice{background:var(--panel);border:1px solid var(--hair-gold-2);box-shadow:0 30px 60px -32px rgba(0,0,0,.55);padding:clamp(16px,2.2vw,24px);display:flex;flex-direction:column;gap:12px}
.voice__head{display:flex;align-items:center;gap:10px}
.voice__lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-green-gold)}
.voice__said{font-size:15px;line-height:1.5;color:var(--paper)}
.voice__foot{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-green-ivory)}
.wave{display:flex;align-items:flex-end;gap:2px;height:18px}
.wave i{width:2px;height:100%;background:var(--gold-2);animation:wave 1.1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:-.2s}
.wave i:nth-child(3){animation-delay:-.4s}
.wave i:nth-child(4){animation-delay:-.6s}
.wave i:nth-child(5){animation-delay:-.8s}
@keyframes wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
/* the flag chips beneath her answer */
.flags{display:flex;flex-wrap:wrap;gap:6px}
.flags span{font-size:12.5px;color:rgba(243,239,228,.88);border:1px solid rgba(231,207,146,.32);padding:6px 10px}
.flags span[data-lead]{color:var(--night);background:var(--gold-2);border-color:var(--gold-2)}
/* the two-Stephens disambiguation buttons — drawn, not real */
.pick{display:flex;gap:8px;flex-wrap:wrap}
.pick span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 13px;color:rgba(240,220,166,.88);border:1px solid rgba(231,207,146,.42)}
.pick span[data-lead]{color:var(--night);background:var(--gold-2);border-color:var(--gold-2)}

/* ── THE SPEND CHART ─────────────────────────────────────────────────────────── */
.spend{background:var(--panel);border:1px solid var(--hair-gold-2);padding:clamp(16px,2.2vw,24px);display:flex;flex-direction:column;gap:11px}
.spend__bars{display:flex;align-items:flex-end;gap:6px;height:96px}
.spend__bars i{flex:1;background:rgba(231,207,146,.3)}
.spend__bars i[data-hi]{background:var(--rule)}
.spend__bars i[data-now]{background:var(--gold-2)}
.spend .row{border-bottom-color:rgba(231,207,146,.24);border-bottom-style:dotted}
.spend .row__k{color:var(--on-green-ivory)}
.spend .row__v{color:var(--paper)}

/* ── THE JOB P&L ─────────────────────────────────────────────────────────────── */
.pl{background:var(--paper);border:1px solid var(--hair-ink-2);padding:clamp(16px,2.2vw,24px);display:flex;flex-direction:column;gap:10px;box-shadow:0 26px 54px -30px rgba(0,0,0,.4)}
.pl__lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.pl__gp{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pl__gp b{font-size:14px;font-weight:300;color:var(--ink-head)}
.pl__gp span{font-family:var(--play);font-size:17px;color:var(--pos)}
.pl__foot{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}

/* ── THE DIARY AND THE STAFF LIST (dark panels of plain rows) ────────────────── */
.dark-list{background:var(--panel);border:1px solid var(--hair-gold-2);padding:clamp(16px,2.2vw,24px);display:flex;flex-direction:column;gap:1px}
.dark-list__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:12px}
.dark-list__head span:first-child{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-green-gold)}
.dark-list__head span:last-child{font-size:11.5px;color:var(--on-green-ivory)}
.dark-row{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid rgba(231,207,146,.14);min-width:0}
.dark-row b{font-size:14px;font-weight:300;color:var(--paper);min-width:0}
.dark-row span{font-size:12.5px;color:var(--on-green-ivory);flex:none}
.dark-row span[data-pos]{color:var(--pos-on-green)}
.dark-row span[data-gold]{color:var(--gold-2)}
@media (max-width:520px){
  .dark-row{flex-wrap:wrap;gap:2px}
  .dark-row span{width:100%}
}

/* ── THE REFERRAL CARD ───────────────────────────────────────────────────────── */
.own,.earn{padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:11px}
.own{background:var(--paper);border:1px solid var(--hair-ink-2)}
.earn{background:var(--brand);border:1px solid var(--rule)}
.own h3{font-family:var(--play);font-weight:400;font-size:clamp(20px,2.4vw,27px);line-height:1.2;color:var(--ink-head)}
.earn h3{font-family:var(--play);font-weight:400;font-size:clamp(20px,2.4vw,27px);line-height:1.2;color:var(--gold)}
.own p{font-size:clamp(14px,1.75vh,16px);line-height:1.6;color:var(--ink)}
.earn p{font-size:clamp(14px,1.75vh,16px);line-height:1.6;color:var(--on-brand-ivory)}
.own__vow{font-family:var(--corm);font-style:italic;font-size:16px;color:var(--pos);margin-top:auto}
.earn__row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px dotted rgba(240,220,166,.3)}
.earn__row span:first-child{font-size:13.5px;color:var(--on-brand-ivory)}
/* ⚠ THE PRICE PLACEHOLDER. §2's [STOP]: pricing is unlaunched and these two rows
   are the COUPLE's plan yields (the 15% referral), not the supplier licence.
   A future reveal is a copy change in ONE place per plan — this element. */
.price-tba{font-family:var(--play);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.earn__foot{font-size:14.5px;line-height:1.6;color:var(--paper);margin-top:auto;padding-top:12px;border-top:1px solid rgba(240,220,166,.28)}

/* ── THE 9b TRIAD CARDS ──────────────────────────────────────────────────────── */
.gain{border:1px solid var(--hair-gold-2);padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:8px}
.gain__l{font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.gain__t{font-family:var(--play);font-size:clamp(17px,2vw,20px);color:var(--paper);line-height:1.25}
.gain__d{font-size:13.5px;line-height:1.55;color:var(--on-green-ivory)}
a.gain{background:var(--brand);border-color:var(--rule);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
a.gain:hover{transform:translateY(-4px);box-shadow:0 26px 52px -28px rgba(0,0,0,.6)}
a.gain .gain__t{color:var(--gold)}
a.gain .gain__d{color:rgba(254,252,247,.9)}
a.gain .gain__go{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:6px}
/* ⚠ a whole card is the link, so its own hover must not inherit the global
   a:hover{color:var(--paper)} and repaint every child. */
a.gain:hover .gain__t,a.gain:hover .gain__go{color:var(--gold)}

/* ── THE UPLOAD DROP ZONE ────────────────────────────────────────────────────── */
.drop{display:flex;align-items:center;gap:11px;border:1px dashed rgba(31,58,48,.3);padding:13px 14px;background:var(--band)}
.drop i{width:24px;height:30px;background:var(--pdf);color:#fff;font-size:7.5px;font-style:normal;display:flex;align-items:center;justify-content:center;flex:none}
.drop b{font-size:13.5px;font-weight:300;color:var(--ink-panel)}
.drop span{font-size:12px;color:var(--ink-mute)}

/* ── THE CLOSING BLOCK ───────────────────────────────────────────────────────── */
.close{max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.6vh,26px);text-align:center}
.close__seal{width:clamp(46px,5.4vw,58px);height:auto;display:block;animation:floaty 6s ease-in-out infinite}