/* ═════════════════════════════════════════════════════════════════════════════
   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}

/* v6 — small manual arrows for the Drive story. .parrow is defined in home.css,
   which this page does not load, so the pair is defined here at a smaller size. */
.pctrl--ds{display:inline-flex;align-items:center;gap:8px;margin-right:14px;vertical-align:middle}
.pctrl--ds .parrow{flex:none;width:30px;height:30px;padding:0;border:1px solid rgba(31,58,48,.22);
  border-radius:50%;background:transparent;color:var(--brand,#1F3A30);display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;transition:border-color .2s,background .2s}
.pctrl--ds .parrow:hover{border-color:rgba(31,58,48,.5);background:rgba(31,58,48,.06)}
.pctrl--ds .parrow:focus-visible{outline:2px solid var(--gold-2,#C9A85C);outline-offset:2px}
html.no-js .pctrl--ds{display:none}
@media (prefers-reduced-motion:reduce){.pctrl--ds{display:none}}

/* trade pages — the early-access form */
.ea{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.8vw,18px);
  align-items:end;max-width:640px}
.ea__f{display:flex;flex-direction:column;gap:6px;min-width:0}
.ea__f--wide{grid-column:1/-1}
.ea__l{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-2,#8A6E2F)}
.ea input,.ea select{font:inherit;font-size:15px;padding:11px 13px;border:1px solid color-mix(in srgb,currentColor 26%,transparent);color-scheme:light;
  border-radius:2px;background:var(--paper,#FEFCF7);color:inherit;min-width:0;width:100%}
.ea input:focus-visible,.ea select:focus-visible{outline:2px solid var(--gold-2,#C9A85C);outline-offset:1px}
.ea__go{grid-column:1/-1;justify-self:start}
.ea__note{grid-column:1/-1;margin:2px 0 0;font-size:13px;line-height:1.5;opacity:.72;max-width:46ch}
@media (max-width:640px){.ea{grid-template-columns:minmax(0,1fr)}}
/* trade pages — the hub grid */
.trades{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(14px,2vw,22px)}
.trade{display:flex;flex-direction:column;gap:7px;padding:clamp(16px,2vw,22px);
  border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent);
  border-radius:2px;text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
.trade:hover{border-color:color-mix(in srgb,currentColor 55%,transparent);
  background:color-mix(in srgb,currentColor 6%,transparent)}
.trade__t{font-family:var(--play,Georgia),serif;font-size:19px}
.trade__d{font-size:14px;line-height:1.5;opacity:.78}
/* trade pages — the FAQ */
.faq{display:flex;flex-direction:column;gap:0;max-width:66ch}
.faq details{border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);padding:15px 0}
.faq details:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.faq summary{cursor:pointer;font-family:var(--play,Georgia),serif;font-size:clamp(17px,2vw,20px);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:20px;opacity:.5;flex:none}
.faq details[open] summary::after{content:'\2212'}
.faq p{margin:10px 0 0;font-size:15.5px;line-height:1.6;opacity:.85}

/* trade pages — a real screen, sized like the players' windows */
.tshot{margin:0;display:flex;flex-direction:column;gap:9px}
.tshot img{display:block;width:100%;height:auto;border-radius:10px;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.5)}
.tshot figcaption{font-size:13.5px;line-height:1.5;opacity:.7}

/* trade pages — breadcrumb */
.crumb{font-size:13px;letter-spacing:.03em;opacity:.7}
.crumb a{color:inherit;text-decoration:none;border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent)}
.crumb a:hover{border-color:currentColor}