/* ==========================================================================
   Venpo · public pages (v2)

   Hand-written stylesheet for the Blade-rendered public surface
   (/vendors, /vendors/{domain}, /vendors/changes, …). No Vite, no Tailwind:
   every rule below is ported from the design prototypes, in this order:

     1  tokens + base ................ Vendor Profile v2
     2  nav + rule + footer .......... Vendor Profile v2
     3  vendor header block .......... Vendor Profile v2
     4  panel / chart / timeline /
        tables / documents / faq /
        section rail ................. Vendor Profile v2
     5  subprocessor graph band ...... graph-band.css (verbatim)
     6  documents page deltas ........ Documents
     7  subprocessors page deltas .... Subprocessors
     8  vendor directory ............. Vendors
     9  change feed .................. Change Feed
    10  media queries ................ all of the above

   Where two design files declared a class identically only one copy is kept.
   Deviations from the prototypes are marked "PORT:" and explained inline.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens + base
   :root is the union of every design file's custom properties.
   -------------------------------------------------------------------------- */
:root{--ink:#15131c;--body:#33303d;--muted:#6b6678;--dim:#8c8798;--faint:#b5b1be;--border:#e6e3ec;--soft:#efedf3;--paper:#FAFAFD;--purple:#5b3fb8;--purple-deep:#4a3299;--purple-soft:#efeaf7;--purple-line:#ddd3f0;--pos:#0f6a3f;--pos-soft:#e7f5ed;--neg:#a51e2c;--neg-soft:#fbeaec;--amber:#b06410;--amber-soft:#fbefe0;--amber-line:#eccfa6;--shadow:0 1px 2px rgba(21,19,28,.04),0 2px 8px -4px rgba(21,19,28,.06);--shadow-n:0 1px 2px rgba(21,19,28,.05),0 6px 16px -10px rgba(21,19,28,.22);--shadow-h:0 1px 2px rgba(21,19,28,.05),0 10px 22px -12px rgba(21,19,28,.3);font-synthesis-weight:none}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--purple);text-decoration:none}
a:hover{color:var(--purple-deep)}
button,input{font-family:inherit}
button{cursor:pointer}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
/* PORT: pub-fav.js swaps favicon sources through remote hosts that do not all
   return square art; the design injected the same rule for its local logos. */
img[data-fav]{object-fit:contain}

/* --------------------------------------------------------------------------
   2 · Nav + footer
   PORT: the v2 prototypes shipped their own nav and footer here. Both are now
   the shared public chrome — markup in public.partials.header / .footer,
   styling in pub/chrome.css, loaded after this file by both public layouts.
   The rules that lived here (nav, .nleft, .nlinks, .nright, .cta-pill, .rule,
   footer, .fin, .fbot) are gone: the bare `nav` and `footer` selectors would
   have hit the chrome's own <nav> and <footer> elements.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3 · Vendor header block (breadcrumb, domain-search banner, title, buttons)
   -------------------------------------------------------------------------- */
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:500;padding:30px 0 22px}
.crumb .sep{color:var(--faint)}
/* PORT: the design gated .upd behind body.tw-upd (a prototype toggle panel);
   here the "last updated" stamp is always shown when the page renders one. */
.crumb .upd{display:inline-flex;margin-left:auto;align-items:center;gap:7px;color:var(--dim);font-weight:500}
.crumb .upd svg{color:var(--purple)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--ink)}
/* PORT: .dbanner was gated behind body.tw-search for the same reason. */
.dbanner{display:block;position:relative;background:linear-gradient(180deg,#fdfcff,#f6f5fa)}
.dswitch{display:flex;align-items:center;justify-content:center;gap:18px;padding:15px 0;flex-wrap:wrap}
.dsfield{display:flex;align-items:center;gap:10px;flex:1;min-width:280px;max-width:520px;height:48px;padding:0 5px 0 16px;border-radius:999px;border:1px solid #cdc9d8;background:#fff;transition:border-color .15s,box-shadow .15s}
.dsfield:focus-within{border-color:var(--purple-line)}
.dsfield>svg{flex:none;color:var(--faint)}
.dsfield input{flex:1;min-width:0;height:100%;border:none;background:none;font-family:inherit;font-size:14px;color:var(--ink)}
.dsfield input::placeholder{color:var(--dim)}
.dsfield input:focus{outline:none}
.dswitch .btn-ink{height:38px;padding:0 18px;font-size:13.5px;flex:none}
.vtop{display:flex;align-items:flex-start;gap:18px}
.vfav{width:56px;height:56px;border-radius:16px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--shadow)}
.vfav img{width:32px;height:32px;display:block}
.vtop h1{margin:0;font-size:38px;font-weight:700;letter-spacing:-1.1px;line-height:1.05}
.vsub{margin-top:7px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.vsub .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.vsub a{font-weight:500}
.vgrow{flex:1;min-width:0}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:var(--purple-line);color:var(--purple)}
.btn-ink{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;border:none;background:var(--ink);color:#fff;font-size:14px;font-weight:600;white-space:nowrap}
.btn-ink:hover{background:#241f33;color:#fff}
.vlead{max-width:720px;margin:20px 0 0;font-size:16px;line-height:1.6;color:var(--body);text-wrap:pretty}
.freshness{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:var(--pos-soft);color:var(--pos);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:700;letter-spacing:.1em}
.freshness i{width:5px;height:5px;border-radius:50%;background:var(--pos)}

/* --------------------------------------------------------------------------
   4 · Panel, vitals, chart, sections, timeline, tables, documents, faq, rail
   -------------------------------------------------------------------------- */
/* vitals panel */
.panel{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.vitals{margin:34px 0 0}
.ctrs{display:grid;grid-template-columns:repeat(4,1fr)}
.ctr{padding:24px 26px;border-right:1px solid var(--soft)}
.ctr:last-child{border-right:none}
.ctr b{display:block;font-size:34px;font-weight:600;letter-spacing:-1px;line-height:1}
.ctr span{display:block;margin-top:8px;font-size:13px;font-weight:600;color:var(--ink)}
.ctr em{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--dim)}
/* chart */
.chart{border-top:1px solid var(--soft);padding:22px 26px 20px}
.chd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.chd h3{margin:0;font-size:13px;font-weight:600;color:var(--ink)}
.chd p{margin:2px 0 0;font-size:12.5px;color:var(--dim)}
.legend{display:flex;gap:14px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);font-weight:500}
.legend i{width:9px;height:9px;border-radius:3px}
.bars{display:flex;align-items:flex-end;gap:5px;height:136px;border-bottom:1px solid var(--border)}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;position:relative;height:100%;padding-top:8px;transition:opacity .14s}
.bars:hover .col{opacity:.42}
.bars:hover .col:hover{opacity:1}
.col:hover .tip{opacity:1;transform:translate(-50%,0)}
.seg{border-radius:3px 3px 0 0;min-height:3px}
.tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%,4px);background:var(--ink);color:#fff;border-radius:8px;padding:7px 10px;font-size:11px;line-height:1.45;white-space:nowrap;opacity:0;transition:.14s;pointer-events:none;z-index:5;box-shadow:0 10px 24px -10px rgba(21,19,28,.5)}
.tip b{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700}
.xaxis{display:flex;gap:5px;margin-top:9px}
.xaxis span{flex:1;text-align:center;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:.06em;color:var(--faint);text-transform:uppercase;white-space:nowrap}
/* sections */
section{padding:64px 0 0;scroll-margin-top:26px}
#sec-overview{scroll-margin-top:20px}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.kick{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--purple);text-transform:uppercase;margin-bottom:12px}
.sh h2{margin:0;font-size:27px;font-weight:600;letter-spacing:-.7px;line-height:1.15}
.sh p{margin:9px 0 0;max-width:640px;font-size:14.5px;line-height:1.6;color:var(--body);text-wrap:pretty}
.shr{font-size:13px;color:var(--dim);white-space:nowrap;padding-bottom:3px}
/* PORT: the index pages (directory, change feed) set their section headings a
   step smaller than the vendor profile does — opt in with <div class="sh idx">. */
.sh.idx{margin-bottom:22px}
.sh.idx h2{font-size:24px;letter-spacing:-.6px}
/* the directory's subhead sits on one line at desktop widths; the design held
   it there with white-space:nowrap, which overflows on small screens */
.sh.idx p{margin:8px 0 0;max-width:none}
/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.ft{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:#fff;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;color:var(--body)}
.ft .ct{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--faint)}
.ft:hover{border-color:var(--purple-line)}
.ft.on{background:var(--purple-soft);border-color:var(--purple-line);color:var(--purple-deep);font-weight:600}
.ft.on .ct{color:var(--purple)}
/* timeline */
.tl{position:relative}
.tl::before{content:"";position:absolute;left:-21px;top:9px;bottom:26px;width:1px;background:var(--soft)}
.tlm{padding-bottom:22px}
.tld{position:relative;display:flex;align-items:center;gap:11px;font-size:13px;font-weight:600;color:var(--body);margin-bottom:12px}
.tld em{font-style:normal;font-weight:500;font-size:12.5px;color:var(--faint)}
.ev.xtra{display:none}
.tlm.open .ev.xtra{display:flex}
.evmore{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;padding:0;background:none;border:none;font-size:12.5px;font-weight:600;color:var(--dim)}
.evmore:hover{color:var(--ink)}
.evmore .chev{color:var(--faint);transition:transform .18s ease}
.tlm.open .evmore .chev{transform:rotate(180deg)}
.tld .dot{position:absolute;left:-25px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 3px var(--paper,#fafafd)}
.ev{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);color:inherit;min-width:0}
.ev+.ev{margin-top:10px}
.ev:hover{border-color:var(--purple-line);color:inherit}
.ev b{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;flex:none}
.ev .head{font-size:13.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tally{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;font-weight:700}
.chip i{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;flex:none}
.chip.bad{color:var(--neg)}.chip.bad i{background:var(--neg-soft)}
.chip.good{color:var(--pos)}.chip.good i{background:var(--pos-soft)}
.chip.neut{color:var(--muted)}.chip.neut i{background:#f1f0f4}
.chip.zero{opacity:.42}
.tlfoot{display:flex;justify-content:center;padding:22px 0 0}
.tlfoot a{font-size:13.5px;font-weight:600;color:var(--purple)}
/* faq */
.faq{display:flex;flex-direction:column}
.faq details{border-bottom:1px solid var(--soft)}
.faq details:last-child{border-bottom:none}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:18px 22px;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:#fbfafd}
.faq details[open] summary{background:#fbfafd;padding-bottom:8px}
.faq details[open]{background:#fbfafd}
.faq .chev{margin-left:auto;flex:none;color:var(--faint);transition:transform .18s ease}
.faq details[open] .chev{transform:rotate(180deg);color:var(--purple)}
.faq p{margin:0;padding:0 78px 20px 22px;font-size:14.5px;line-height:1.65;color:var(--body);text-wrap:pretty}
/* tables */
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding:14px 20px;border-bottom:1px solid var(--soft)}
tbody td{padding:14px 20px;border-bottom:1px solid var(--soft);font-size:13.5px;color:var(--body);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fbfaFD}
.sp-name{display:flex;align-items:center;gap:11px;min-width:0}
.sp-name img{width:20px;height:20px;border-radius:5px;flex:none}
.sp-name b{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.sp-name em{display:block;font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:var(--faint);margin-top:2px}
.src{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--muted)}
.tfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:#fcfcfe;border-top:1px solid var(--soft);font-size:13px;color:var(--dim);flex-wrap:wrap}
/* documents */
.docs{display:flex;flex-direction:column}
.dhead{display:grid;grid-template-columns:1fr 130px;gap:16px;padding:14px 22px;border-bottom:1px solid var(--soft);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.doc{display:grid;grid-template-columns:1fr 130px;align-items:center;gap:16px;padding:15px 22px;border-bottom:1px solid var(--soft)}
.doc:last-of-type{border-bottom:none}
.doc:hover{background:#fbfaFD}
.doc .t{min-width:0}
.doc .t b{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.35}
.doc .t em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--faint);margin-top:3px}
.tpill{display:inline-flex;padding:4px 10px;border-radius:7px;background:#f1f0f4;color:#4c4759;font-size:11.5px;font-weight:600}
.tpill.privacy{background:var(--purple-soft);color:var(--purple-deep)}
.tpill.sub{background:var(--amber-soft);color:var(--amber)}
.doc .when{font-size:13px;color:var(--body);white-space:nowrap}
.doc .when em{display:block;font-style:normal;font-size:11.5px;color:var(--faint);margin-top:2px}
.doc .read2{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--dim);text-align:right;white-space:nowrap}
/* method + cta */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:30px 0 0}
.mcol h4{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
.mcol p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.mcol .n{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--faint);margin-bottom:10px}
.endcta{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:64px 0 0;padding:30px 34px;border:1px solid var(--purple-line);border-radius:20px;background:linear-gradient(180deg,#fbfaff,#f6f3fd);flex-wrap:wrap}
.endcta h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.5px}
.endcta p{margin:7px 0 0;font-size:14px;color:var(--body);max-width:560px}
/* floating section rail
   PORT: .srail was gated behind body.tw-rail in the prototype; it is shown by
   default here and pub.js still adds .live once it has measured the page. */
.srail{display:block;position:fixed;top:0;left:max(16px,calc(50% - 786px));width:152px;z-index:40;padding:0;opacity:0;pointer-events:none;transition:opacity .22s ease}
.srail.live{opacity:1;pointer-events:auto}
.srail a{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:15px 12px;font-size:13px;font-weight:500;color:var(--muted);line-height:1.35;letter-spacing:-.01em;text-align:center;text-wrap:pretty}
.srail a+a::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--soft)}
.srail a{transition:color .15s,background .15s}
.srail a:hover{background:#faf9fc;color:var(--body)}
.srail a:hover .ic{transform:translateY(-1px)}
.srail .ic{transition:color .15s,transform .18s ease}
.srail a.on:hover{background:#faf8fd}
.srail .ic{flex:none;color:var(--faint);transition:color .15s}
.srail a:hover .ic{color:var(--dim)}
.srail a.on{background:none;color:var(--purple-deep);font-weight:600}
.srail a.on .ic{color:var(--purple)}

/* --------------------------------------------------------------------------
   5 · Subprocessor graph band — graph-band.css, verbatim
   -------------------------------------------------------------------------- */
/* Venpo · subprocessor graph band — shared by Subprocessors.html and Vendor Profile.html */
:root{--shadow-n:0 1px 2px rgba(21,19,28,.05),0 6px 16px -10px rgba(21,19,28,.22);--shadow-h:0 1px 2px rgba(21,19,28,.05),0 10px 22px -12px rgba(21,19,28,.3)}
.fav{width:26px;height:26px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.fav img{width:66%;height:66%;object-fit:contain;display:block}
.fav.sm{width:20px;height:20px;border-radius:6px}
.dotsep{width:3px;height:3px;border-radius:50%;background:var(--faint);display:inline-block;flex:none}
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
/* ── graph band (as on the public graph page) ── */
.band{position:relative;width:100%;max-width:1200px;margin:76px auto 0;padding:0 40px;box-sizing:border-box}
.bandin{position:relative;height:440px;overflow:hidden;border-radius:22px;background:#4c31a4;color:#fff;display:grid;grid-template-columns:minmax(300px,392px) 1fr;gap:44px;padding:0 0 0 44px;text-align:left}
.bandtxt{min-width:0;align-self:center}
.bandtag{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:7px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:700}
.bandtxt h2{margin:17px 0 0;font-weight:600;font-size:31px;line-height:1.12;letter-spacing:-1.1px}
.bandtxt p{margin:14px 0 0;font-size:14px;line-height:1.62;color:rgba(255,255,255,.76);text-wrap:pretty}
.bandcta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.bandcta .btn{background:#fff;border-color:#fff;color:var(--ink)}
.bandcta .btn:hover{background:#f2ecfd;border-color:#f2ecfd}
.bandcta .btn svg{color:var(--purple)}
.bandfine{flex-basis:100%;font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.58)}
.band.top{margin:38px auto 0}
.band.top .bandin{height:218px}
.band.top .bandtxt h2{margin:14px 0 0;font-size:24px;letter-spacing:-.8px}
.band.top .bandtxt p{margin:9px 0 0}
.band.top .bandcta{margin-top:18px}
.band.top .pv{top:30px}
.pv{position:absolute;left:0;top:56px;width:760px;display:block;text-align:left;color:inherit;cursor:pointer}
.pv:hover{color:inherit}
.pvhold{position:relative;min-width:0}
.pvwin{display:flex;flex-direction:column;height:460px;overflow:hidden;background:#fff;color:var(--ink);border:1px solid #d9d2ee;border-radius:18px;box-shadow:0 34px 60px -30px rgba(24,12,60,.5);transition:box-shadow .2s}
.pv:hover .pvwin{box-shadow:0 42px 72px -30px rgba(24,12,60,.6)}
.pvbar{flex:none;display:flex;align-items:center;gap:11px;width:100%;padding:10px 187px 10px 15px;border-bottom:1px solid var(--soft)}
.pvt{min-width:0}
.pvt b{display:block;font-size:13px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.pvt span{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--dim);margin-top:2px;white-space:nowrap}
.pvsp{flex:1}
.pvopen{flex:none;display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 12px;border-radius:999px;background:var(--purple-soft);color:var(--purple);font-size:11.5px;font-weight:600;transition:.16s}
.pvopen svg{width:12px;height:12px}
.pv:hover .pvopen{background:var(--purple);color:#fff}
.pvcv{position:relative;flex:1;min-height:0;background:radial-gradient(circle at 1px 1px,rgba(21,19,28,.07) 1px,transparent 0) 0 0/22px 22px,var(--paper)}
.pvcv>svg{position:absolute;left:0;top:0;overflow:visible}
.pvcv path{fill:none;stroke:#ded9e8;stroke-width:1.6}
.pvcv path.hot{stroke:var(--purple);stroke-opacity:.85;stroke-width:2.1}
.pvn{position:absolute;display:flex;align-items:center;gap:9px;height:40px;padding:0 10px;background:#fff;border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow-n)}
.pvn .t{flex:1;min-width:0}
.pvn .t b{display:block;font-size:12px;font-weight:600;letter-spacing:-.012em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvn .t i{display:block;font-style:normal;font-size:10px;line-height:1.3;color:var(--dim);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvn .c{flex:none;height:20px;padding:0 7px;border-radius:6px;background:var(--purple-soft);border:1px solid var(--purple-line);color:var(--purple);font-size:10.5px;font-weight:700;display:flex;align-items:center}
.pvn .c.off{background:#fff;border-color:var(--border);color:var(--muted)}
.pvn.root{height:46px;background:var(--ink);border-color:var(--ink);box-shadow:0 12px 26px -12px rgba(21,19,28,.5)}
.pvn.root .t b{color:#fff;font-size:13px}
.pvn.root .t i{color:rgba(255,255,255,.55)}
.pvn.root .fav{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.pvn.sel{border-color:var(--purple);box-shadow:0 0 0 3px rgba(91,63,184,.13),var(--shadow-h)}
.pvmore{position:absolute;width:38px;height:38px;border-radius:50%;background:#fff;border:1px dashed var(--faint);color:var(--muted);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-n)}
.pvpanel{position:absolute;left:446px;top:30px;width:274px;background:#fff;border:1px solid var(--border);border-radius:13px;box-shadow:0 24px 46px -20px rgba(21,19,28,.34),0 2px 6px -2px rgba(21,19,28,.07);overflow:hidden;z-index:3}
.pvptop{display:flex;align-items:center;gap:9px;padding:11px 12px 10px}
.pvptop b{font-size:12.5px;font-weight:700;letter-spacing:-.015em}
.pvptop span{font-size:11px;color:var(--dim)}
.pvtabs{display:flex;gap:15px;padding:0 13px;border-bottom:1px solid var(--soft)}
.pvtab{font-size:11.5px;font-weight:600;color:var(--faint);padding-bottom:8px;border-bottom:2px solid transparent;margin-bottom:-1px}
.pvtab.on{color:var(--ink);border-color:var(--ink)}
.pvrows{padding:5px}
.pvr{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:8px}
.pvr.on{background:#f7f5fb}
.pvr .t{flex:1;min-width:0}
.pvr .t b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvr .t i{font-style:normal;font-size:10px;color:var(--dim)}
.pvr .v{flex:none;font-size:10.5px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums}
@media(max-width:1120px){.bandin{grid-template-columns:1fr;height:auto;gap:0;padding:38px 32px 0}.bandtxt{max-width:660px;align-self:start}.pvhold{height:246px;margin-top:26px}.pv{top:0;left:0;right:-32px;width:auto}.pvbar{padding-right:15px}.band.top .pvhold{display:none}.band.top .bandin{padding-bottom:36px}}
@media(max-width:860px){.pvpanel{display:none}}
@media(max-width:760px){.band{margin-top:56px;padding:0 22px}.bandin{padding:30px 22px 0}.bandtxt h2{font-size:26px;letter-spacing:-.8px}}

/* --------------------------------------------------------------------------
   6 · Documents page deltas (Documents.html)
   The standalone documents listing widens the "last change" column and gives
   the panel its own top margin — opt in with <div class="panel docs-page">.
   -------------------------------------------------------------------------- */
.doc .when.none{color:var(--faint)}
.panel.docs-page{margin-top:38px}
.panel.docs-page .dhead,.panel.docs-page .doc{grid-template-columns:1fr 150px}
.panel.docs-page .tfoot{padding:16px 22px}

/* --------------------------------------------------------------------------
   7 · Subprocessors page deltas (Subprocessors.html)
   -------------------------------------------------------------------------- */
tr.grp{scroll-margin-top:64px}
tr.grp td{padding:9px 20px;background:#fbfaFD;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--faint)}
tr.grp:hover td{background:#fbfaFD}
.src{white-space:nowrap}
.btn.lg{height:42px;padding:0 20px;font-size:14.5px}

/* --------------------------------------------------------------------------
   8 · Vendor directory (Vendors.html)
   -------------------------------------------------------------------------- */
/* head */
.hero{padding:92px 0 0}
.phead{max-width:720px;margin:0 auto;text-align:center}
.phead h1{margin:0;font-size:46px;font-weight:700;letter-spacing:-1.7px;line-height:1.04}
.phead p{margin:18px auto 0;max-width:620px;font-size:16.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:56px 0 0}
.st{border-radius:24px;padding:20px 20px 22px;border:1px solid rgba(21,19,28,.06);display:flex;flex-direction:column;gap:18px;box-shadow:0 16px 30px -24px rgba(21,19,28,.5)}
.st.a{background:#5b3fb8;border-color:rgba(255,255,255,.16);box-shadow:0 18px 34px -22px rgba(45,26,110,.9)}
.st.a .stx b,.st.a .stx span{color:#fff}
.st.a .stx em{color:rgba(255,255,255,.66)}
.st.b{background:#F4EEE0 url("stage-grain.png") 0 0/256px 256px repeat}
.st.c{position:relative;background:#3FA663;border-color:rgba(255,255,255,.18);box-shadow:0 18px 34px -22px rgba(12,70,40,.85)}
.st.c::before,.st.d::before{content:"";position:absolute;inset:0;border-radius:inherit;background:url("grain-strong.png") 0 0/128px 128px repeat;opacity:.35;mix-blend-mode:overlay;pointer-events:none}
.st.c>*,.st.d>*{position:relative}
.st.c .stx b,.st.c .stx span{color:#fff}
.st.c .stx em{color:rgba(255,255,255,.7)}
.st.c .chain i{color:rgba(255,255,255,.75)}
.st.d{position:relative;background:#FFC53D}
.viz{height:86px;position:relative;overflow:hidden;margin:0 0 -12px -20px;padding:0 0 12px 20px}
.stx b{display:block;font-size:32px;font-weight:600;letter-spacing:-1.1px;line-height:1}
.stx span{display:block;margin-top:8px;font-size:13px;font-weight:600;color:var(--ink)}
.stx em{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--dim)}
.cluster{display:flex;align-items:center;padding-top:22px}
.cluster img{width:36px;height:36px;border-radius:11px;background:#fff;border:1px solid rgba(21,19,28,.07);padding:7px;margin-right:-10px;box-shadow:0 6px 14px -8px rgba(20,10,50,.8)}
.cluster .chip{margin-left:18px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;font-weight:700;color:var(--purple-deep);background:#fff;border:none;border-radius:999px;padding:5px 9px}
.dstack{position:absolute;left:20px;right:20px;top:6px;display:flex;flex-direction:column;gap:7px}
.drow{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(21,19,28,.06);border-radius:11px;padding:7px 10px;box-shadow:0 6px 14px -10px rgba(21,19,28,.7)}
.drow svg{color:var(--faint);flex:none}
.drow em{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:var(--body);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow i{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;color:var(--faint);font-style:normal;flex:none}
.chain{display:flex;align-items:center;gap:8px;padding-top:24px}
.chain img{width:30px;height:30px;border-radius:10px;background:#fff;border:1px solid rgba(21,19,28,.07);padding:6px;box-shadow:0 6px 12px -9px rgba(21,19,28,.6)}
.chain i{color:var(--faint);font-style:normal;font-size:12px}
.lagrows{position:absolute;left:20px;right:20px;top:6px;display:flex;flex-direction:column;gap:7px}
.lagrows .pdot{width:7px;height:7px;border-radius:50%;background:rgba(70,48,0,.28);flex:none}
.lagrows .pdot.on{background:#8a5a00;box-shadow:0 0 0 3px rgba(138,90,0,.16)}
/* toolbar */
.tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.search{position:relative;flex:1;min-width:260px}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint)}
.search input{width:100%;border:1px solid var(--border);border-radius:999px;background:#fff;padding:10px 14px 10px 40px;font-size:13.5px;color:var(--ink);outline:none}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:var(--purple-line)}
.vendor-lookup{position:relative}
.vendor-lookup .search{z-index:20}
.vendor-search-submit{height:40px;justify-content:center}
.vendor-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;max-height:330px;overflow-y:auto;padding:6px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 22px 42px -22px rgba(21,19,28,.55)}
.vendor-search-results[hidden]{display:none}
.vendor-search-hit{display:flex;align-items:center;gap:11px;padding:10px;border-radius:10px;color:var(--ink)}
.vendor-search-hit:hover,.vendor-search-hit.on{background:#f7f5fb;color:var(--ink)}
.vendor-search-mark{width:30px;height:30px;border:1px solid var(--purple-line);border-radius:9px;background:var(--purple-soft);color:var(--purple);display:flex;align-items:center;justify-content:center;flex:none;font-size:12px;font-weight:700}
.vendor-search-copy{display:block;min-width:0;flex:1}
.vendor-search-copy b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vendor-search-copy em{display:block;margin-top:2px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;font-style:normal;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vendor-search-arrow{color:var(--dim);font-size:15px;flex:none}
.vendor-search-message{padding:13px 12px;font-size:13px;color:var(--muted)}
.vendor-search-error{flex-basis:100%;margin-top:-4px;padding-left:12px;font-size:12px;color:var(--neg)}
/* directory rows */
.thead,.row{display:grid;grid-template-columns:1fr 86px 130px 118px 132px 30px;align-items:center;gap:16px}
.thead{padding:13px 22px;border-bottom:1px solid var(--soft)}
.thead span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.row{padding:15px 22px;border-bottom:1px solid var(--soft);color:inherit}
.row:last-child{border-bottom:none}
.row:hover{background:#fbfaFD;color:inherit}
.row:hover .go{opacity:1;transform:translateX(0)}
.vn{display:flex;align-items:center;gap:11px;min-width:0}
.vn img{width:22px;height:22px;border-radius:6px;flex:none}
.vn b{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.015em;line-height:1.3}
.vn em{display:block;font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:var(--faint);margin-top:2px}
.cat{font-size:12.5px;color:var(--muted)}
.num{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--body)}
.act{display:flex;align-items:center;gap:9px}
.spark{display:flex;align-items:flex-end;gap:2px;height:22px}
.spark i{width:3px;border-radius:1px;background:var(--purple)}
.act em{font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--dim)}
.last{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--body);white-space:nowrap}
.nosub{font-size:12.5px;color:var(--faint)}
.go{color:var(--dim);display:flex;justify-content:flex-end;opacity:0;transform:translateX(-3px);transition:opacity .14s,transform .14s}
.empty{padding:44px 22px;text-align:center;font-size:14px;color:var(--muted)}
/* PORT: the directory's panel foot stacks its pager over the range caption.
   Applies automatically when the foot holds a pager, or on demand via .stack. */
.tfoot.stack,.tfoot:has(.pager){flex-direction:column;align-items:center;gap:9px;padding:18px 22px;font-size:12.5px}
.pager{display:flex;align-items:center;gap:5px}
.pg{min-width:32px;height:32px;padding:0 10px;border:1px solid var(--border);background:#fff;border-radius:9px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:500;color:var(--body);display:inline-flex;align-items:center;justify-content:center}
.pg:not(.off):hover{border-color:var(--purple-line);color:var(--purple)}
.pg.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pg.off{color:var(--faint);border-color:var(--soft);cursor:default}
.pg.gap{border:none;background:transparent;color:var(--faint);min-width:16px;padding:0}

/* --------------------------------------------------------------------------
   9 · Change feed (Change Feed.html)
   -------------------------------------------------------------------------- */
/* head — the feed's centred header carries its own top padding (the directory
   gets that from .hero instead), so it opts in with <header class="phead feed"> */
.phead.feed{padding:92px 0 0;max-width:700px}
.phead .vlink{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:14px;font-weight:600}
/* changed this week */
.recent{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rc{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(21,19,28,.07);border-radius:24px;overflow:hidden;color:inherit;box-shadow:0 16px 32px -26px rgba(21,19,28,.6);transition:.16s}
.rc:hover{color:inherit;transform:translateY(-3px);box-shadow:0 26px 44px -28px rgba(21,19,28,.6);border-color:var(--purple-line)}
.stage{position:relative;height:162px;overflow:hidden;background:#F4EEE0 url("stage-grain.png") 0 0/256px 256px repeat;border-bottom:1px solid rgba(21,19,28,.06)}
.mini{position:absolute;left:20px;right:-18px;top:20px;background:#fff;border:1px solid rgba(21,19,28,.06);border-radius:15px;box-shadow:0 18px 32px -20px rgba(21,19,28,.5);-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.mh{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--soft)}
.mh img{width:15px;height:15px;border-radius:4px;flex:none}
.mh b{font-size:11.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh span{margin-left:auto;flex:none;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:8.5px;font-weight:700;letter-spacing:.08em;color:var(--purple);background:var(--purple-soft);border-radius:5px;padding:3px 5px}
.mb{display:block;padding:12px 13px 18px;font-size:11.5px;line-height:1.65;color:var(--body)}
.mb del{color:var(--neg);text-decoration:line-through;text-decoration-color:#e5b9bf}
.mb ins{color:var(--pos);text-decoration:underline;text-decoration-color:#9bcdb1;text-underline-offset:3px;text-decoration-thickness:1px}
.rcb{padding:16px 19px 19px;display:flex;flex-direction:column;gap:10px}
.rcv{display:flex;align-items:center;gap:8px}
.rcv img{width:19px;height:19px;border-radius:5px;flex:none}
.rcv b{font-size:13px;font-weight:600;letter-spacing:-.01em}
.rcv i{margin-left:auto;font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:var(--faint)}
.rch2{font-size:15.5px;font-weight:600;letter-spacing:-.3px;line-height:1.4;color:var(--ink);text-wrap:pretty}
/* feed */
.day{display:grid;grid-template-columns:20px 1fr;gap:16px}
.day .rail{position:relative;display:flex;justify-content:center}
.day .rail::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--soft)}
.day .dot{position:relative;margin-top:5px;width:9px;height:9px;border-radius:50%;background:var(--purple);flex:none;box-shadow:0 0 0 3px rgba(91,63,184,.13)}
.dbody{padding-bottom:22px}
.dlab{font-size:13px;font-weight:600;color:var(--body);margin-bottom:12px}
.frow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);color:inherit;min-width:0}
.frow+.frow{margin-top:10px}
.frow:hover{border-color:var(--purple-line);color:inherit}
.frow img{width:20px;height:20px;border-radius:5px;flex:none}
.frow b{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;flex:none}
/* PORT: the feed's document label reuses the class name the documents list
   gives its grid rows (separate files in the prototype, one sheet here), so
   the row styling has to be neutralised inside .frow. */
.frow .doc{display:block;padding:0;border:none;background:none;font-size:13.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* pagination */
.pfoot{display:flex;flex-direction:column;align-items:center;gap:9px;padding:26px 0 0;font-size:12.5px;color:var(--dim)}

/* --------------------------------------------------------------------------
   10 · Media queries
   (the graph band keeps its own 1120 / 860 / 760 blocks in section 5)
   The nav's own breakpoints moved to pub/chrome.css with the rest of the
   chrome; what is left here is page-body only.
   -------------------------------------------------------------------------- */
/* not enough outer margin for labels – icons only, label on hover */
@media(max-width:1620px){
.srail{width:auto;left:max(16px,calc(50% - 668px))}
.srail a{padding:13px 14px}
.srail .lbl{position:absolute;left:calc(100% + 10px);padding:6px 10px;border-radius:8px;background:var(--ink);color:#fff;font-size:12px;font-weight:500;white-space:nowrap;opacity:0;transform:translateX(-3px);transition:.16s;pointer-events:none;box-shadow:0 10px 24px -10px rgba(21,19,28,.5)}
.srail a:hover .lbl{opacity:1;transform:translateX(0)}
}
@media(max-width:1200px){.srail{display:none}}
@media(max-width:1080px){.phead{max-width:660px}.stats{grid-template-columns:repeat(2,1fr)}.thead{display:none}.row{grid-template-columns:1fr 118px 30px}.row .cat,.row .num,.row .act{display:none}.recent{grid-template-columns:repeat(2,1fr)}.frow .doc{display:none}}
@media(max-width:980px){.ctrs{grid-template-columns:repeat(2,1fr)}.ctr:nth-child(2){border-right:none}.ctr:nth-child(1),.ctr:nth-child(2){border-bottom:1px solid var(--soft)}.method{grid-template-columns:1fr}.doc,.dhead{grid-template-columns:1fr}.dhead span:last-child{display:none}.panel.docs-page .dhead,.panel.docs-page .doc{grid-template-columns:1fr 130px}.panel.docs-page .dhead span:last-child{display:block}}
@media(max-width:640px){.vendor-lookup .search{min-width:100%}.vendor-search-submit{width:100%}}
