/* יד למבשרת — volunteering. Tokens only, so all three design systems carry through. */
.vl .vl-ic{width:18px;height:18px;flex:none}
.vl .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* head */
.vl-head{display:grid;gap:10px;margin-bottom:22px;max-width:52em}
.vl-head .eyebrow .vl-ic{width:20px;height:20px}
.vl-head .lede{margin-top:2px}
.vl-stats{display:flex;flex-wrap:wrap;gap:10px 28px;margin:8px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.vl-stats div{display:flex;flex-direction:column-reverse;gap:2px}
.vl-stats dt{font:700 13px/1.3 var(--sans);color:var(--muted)}
.vl-stats dd{margin:0;font:900 30px/1 var(--news);color:var(--brand);font-variant-numeric:tabular-nums}

/* tabs */
.vl-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.vl-tabs::-webkit-scrollbar{display:none}
.vl-tab{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:0;background:none;font:800 16px/1 var(--sans);color:var(--muted);cursor:pointer;box-shadow:inset 0 -3px transparent;-webkit-user-select:none;user-select:none;transition:color 120ms,box-shadow 160ms}
.vl-tab[aria-selected="true"]{color:var(--fg);box-shadow:inset 0 -3px var(--brand)}
.vl-tab[aria-selected="true"] .vl-ic{color:var(--brand)}
.vl-panel{outline:none;display:grid;gap:18px}
.vl-panel > .notice{margin:0}

/* filters */
.vl-filters{display:grid;gap:10px}
.vl-frow{display:flex;align-items:center;gap:10px;min-width:0}
.vl-frow2{display:flex;flex-wrap:wrap;gap:10px 24px}
.vl-flabel{flex:none;font:800 13px/1 var(--sans);color:var(--muted);min-width:3.2em}
.vl-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:16px;padding-block:2px;min-width:0}
.vl-scroll::-webkit-scrollbar{display:none}
.vl-chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:var(--r-ctl);font:700 15px/1 var(--sans);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:transform 120ms cubic-bezier(.2,.8,.2,1),background-color 120ms,border-color 120ms}
.vl-chip .vl-ic{width:17px;height:17px;color:var(--brand)}
.vl-chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.vl-chip[aria-pressed="true"] .vl-ic{color:currentColor}
.vl-chip:active{transform:scale(.97)}
.vl-chipwrap{display:flex;flex-wrap:wrap;gap:8px}

.vl-resbar{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;color:var(--muted)}
.vl-resbar b{color:var(--fg);font-variant-numeric:tabular-nums}
.vl-link{border:0;background:none;padding:0 4px;min-height:44px;font:800 15px/1.2 var(--sans);color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;display:inline-flex;align-items:center;gap:6px}

/* opportunity cards */
.vl-opps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.vl-opp{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);transition:border-color 140ms,transform 120ms cubic-bezier(.2,.8,.2,1)}
.vl-opp h3{font:700 20px/1.25 var(--news);margin:0}
.vl-opp h3 button{all:unset;cursor:pointer;text-wrap:balance}
.vl-opp h3 button::after{content:"";position:absolute;inset:0;border-radius:var(--r-card)}
.vl-opp h3 button:focus-visible{outline:none}
.vl-opp:has(h3 button:focus-visible){outline:3px solid var(--sun);outline-offset:2px}
.vl-opp:active{transform:scale(.99)}
.vl-demo{font:700 13px/1 var(--sans);color:var(--muted);white-space:nowrap}
.vl-org{font:700 14px/1.35 var(--sans);color:var(--brand)}
.vl-meta{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px;font-size:14px;color:var(--muted)}
.vl-meta li{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.vl-meta .vl-ic{width:16px;height:16px;margin-top:1px}

.vl-cat{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 12px;border-radius:var(--r-ctl);background:var(--brand-soft);color:var(--brand);font:800 13px/1 var(--sans)}
.vl-cat .vl-ic{width:16px;height:16px}
.vl-cat-rescue{background:color-mix(in srgb,var(--red) 13%,var(--surface));color:var(--red)}
.vl-cat-food,.vl-cat-community{background:color-mix(in srgb,var(--sun) 26%,var(--surface));color:var(--fg)}

.vl-spots{margin-top:auto;padding-top:6px;display:grid;gap:6px;font:700 13px/1.3 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.vl-bar{display:block;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.vl-bar i{display:block;height:100%;background:var(--brand);border-radius:inherit}
.vl-spots.low{color:var(--fg)}
.vl-spots.low .vl-bar i{background:var(--sun)}
.vl-spots.full{color:var(--red)}
.vl-spots.full .vl-bar i{background:var(--muted)}

.vl-empty{display:grid;justify-items:center;gap:10px;text-align:center;padding:32px 16px;border:1px dashed var(--line);border-radius:var(--r-card);color:var(--muted)}
.vl-empty .vl-ic{width:28px;height:28px;color:var(--brand)}
.vl-empty b{color:var(--fg)}

.vl-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-radius:var(--r-card);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 25%,var(--line))}
.vl-cta > div{display:grid;gap:2px}
.vl-cta b{font:800 17px/1.3 var(--sans)}
.vl-cta span{color:var(--muted);font-size:15px}

/* bottom sheet / dialog */
.vl-sheet{border:0;padding:0;background:var(--surface);color:var(--fg);border-radius:var(--r-card);width:min(620px,calc(100% - 32px));max-height:min(88vh,860px);box-shadow:var(--shadow);overscroll-behavior:contain;direction:rtl}
.vl-sheet::backdrop{background:color-mix(in srgb,var(--fg) 45%,transparent)}
.vl-sheet[open]{animation:vl-pop 220ms cubic-bezier(.2,.8,.2,1)}
@keyframes vl-pop{from{opacity:0;transform:translateY(12px) scale(.98)}}
.vl-sh{display:grid;gap:12px;padding:20px 22px 24px}
.vl-grab{display:none}
.vl-sh-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vl-sh-title{font:900 clamp(24px,3vw,30px)/1.15 var(--news);text-wrap:balance}
.vl-sh-org{font:800 15px/1.4 var(--sans);color:var(--brand)}
.vl-sh-desc{font-size:16px;line-height:1.6}
.vl-x{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:var(--r-ctl);cursor:pointer}
.vl-x.sm{width:44px;height:44px;border-color:transparent;color:var(--muted)}
.vl-x:active{transform:scale(.95)}
.vl-facts{margin:0;display:grid;gap:0;border-block:1px solid var(--line)}
.vl-facts > div{display:grid;grid-template-columns:20px 6.5em 1fr;gap:4px 10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.vl-facts > div:first-child{border-top:0}
.vl-facts .vl-ic{color:var(--brand);margin-top:2px}
.vl-facts dt{font:800 14px/1.5 var(--sans);color:var(--muted)}
.vl-facts dd{margin:0;font-size:15px;line-height:1.5}
.vl-orglink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:800 15px/1.3 var(--sans);color:var(--brand);text-underline-offset:.22em}
.vl-apply{display:grid;gap:12px;padding-top:14px;border-top:2px solid var(--fg)}
.vl-submit{justify-self:start}
.vl-ok{outline:none;align-items:start}
.vl-ok > .vl-ic{width:28px;height:28px;color:var(--ok)}

.vl-fs{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.vl-fs legend{font:700 14px/1.4 var(--sans);padding:0;margin-bottom:8px}
.vl-tick{position:relative;display:inline-flex}
.vl-tick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.vl-tick span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--raise);font:700 15px/1 var(--sans);-webkit-user-select:none;user-select:none}
.vl-tick input:checked + span{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.vl-tick input:focus-visible + span{outline:3px solid var(--sun);outline-offset:2px}
.vl-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:600;line-height:1.45;min-height:44px;padding-block:4px;cursor:pointer}
.vl-check input{width:22px;height:22px;flex:none;margin:1px 0 0}
.vl .field [aria-invalid="true"]{border-color:var(--red)}
.vl .err{color:var(--red);font-weight:700;font-size:13px}
.vl-fine{font-size:14px;color:var(--muted);line-height:1.5}

/* organizations */
.vl-sec-head{display:grid;gap:8px;max-width:46em}
.vl-sec-head p{color:var(--muted);font-size:16px}
.vl-h3{font:800 19px/1.3 var(--sans);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vl-orgs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.vl-orgrow{display:grid;grid-template-columns:44px 1fr;gap:6px 14px;padding:16px 0;border-top:1px solid var(--line)}
.vl-orgic{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-ctl);background:var(--brand-soft);color:var(--brand)}
.vl-orgic .vl-ic{width:22px;height:22px}
.vl-orgtx{display:grid;gap:4px;min-width:0}
.vl-orgtx b{font:700 18px/1.3 var(--news)}
.vl-orgtx p{color:var(--muted);font-size:15px;line-height:1.5}
.vl-orgtx .meta{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.vl-orgtx .meta .vl-ic{width:14px;height:14px}
.vl-orgact{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.vl-orgact .btn{min-height:44px}
.vl-orgact .btn .vl-ic{width:16px;height:16px}

/* profile */
.vl-me{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.vl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;display:grid;gap:14px;align-content:start;min-width:0}
.vl-wide{grid-column:1/-1}
.vl-ringwrap{display:flex;align-items:center;gap:18px}
.vl-ring{width:132px;height:132px;flex:none}
.vl-ring circle{fill:none;stroke-width:11}
.vl-ring-bg{stroke:var(--brand-soft)}
.vl-ring-fg{stroke:var(--brand);stroke-linecap:round;transition:stroke-dasharray 600ms cubic-bezier(.2,.8,.2,1)}
.vl-ring-n{font:900 34px var(--news);fill:var(--fg)}
.vl-ring-l{font:700 13px var(--sans);fill:var(--muted)}
.vl-lvl{display:grid;gap:4px}
.vl-lvl b{font:900 24px/1.15 var(--news)}
.vl-lvl span{color:var(--muted);font-size:15px}
.vl-badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vl-badges li{display:grid;justify-items:center;gap:2px;padding:10px 4px;border-radius:var(--r-card);border:1px dashed var(--line);color:var(--muted);text-align:center}
.vl-badges .vl-ic{width:24px;height:24px}
.vl-badges b{font:900 20px/1 var(--news);font-variant-numeric:tabular-nums}
.vl-badges span{font:700 12px/1.25 var(--sans)}
.vl-badges li.on{border-style:solid;border-color:var(--sun);background:color-mix(in srgb,var(--sun) 20%,var(--surface));color:var(--fg)}
.vl-badges li.on .vl-ic{color:color-mix(in srgb,var(--sun) 60%,var(--fg))}

.vl-apps,.vl-log,.vl-roll{list-style:none;margin:0;padding:0;display:grid}
.vl-app{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.vl-app:first-child{border-top:0;padding-top:0}
.vl-app-h{display:grid;gap:2px;min-width:0}
.vl-app-h b{font:700 17px/1.3 var(--news)}
.vl-app-act{grid-column:1/-1}
.vl-steps{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center;font:700 13px/1 var(--sans);color:var(--muted)}
.vl-steps li{display:inline-flex;align-items:center;gap:5px;padding:6px 10px 6px 8px;border-radius:var(--r-ctl);border:1px solid var(--line);white-space:nowrap}
.vl-steps i{width:16px;height:16px;border-radius:50%;border:1.8px solid currentColor;display:grid;place-items:center}
.vl-steps i .vl-ic{width:11px;height:11px;stroke-width:3}
.vl-steps li.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.vl-steps li.now{color:var(--brand-ink);background:var(--brand);border-color:var(--brand)}
.vl-steps li.now i{background:var(--brand-ink);border-color:var(--brand-ink)}

.vl-logf{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.8fr) minmax(0,1.2fr) auto;gap:10px;align-items:end}
.vl-logf .btn{min-height:46px;justify-content:center}
.vl-err{grid-column:1/-1}
.vl-log li{display:grid;grid-template-columns:minmax(0,1fr) auto auto 44px;gap:12px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:15px}
.vl-log-w{min-width:0;overflow-wrap:anywhere}
.vl-log b{font-variant-numeric:tabular-nums}
.vl-total{font-size:16px}
.vl-total b{font:900 22px var(--news);color:var(--brand)}

.vl-honor{background:color-mix(in srgb,var(--sun) 10%,var(--surface))}
.vl-roll li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--sun) 35%,var(--line))}
.vl-roll li:first-child{border-top:0}
.vl-roll li > span:nth-child(2){display:grid;gap:1px}
.vl-roll li > span:nth-child(2) > span{color:var(--muted);font-size:14px}
.vl-roll b{font:700 17px/1.3 var(--news)}
.vl-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--brand-ink);font:800 17px/1 var(--sans)}
.vl-rh{font:900 18px var(--news);color:var(--brand);font-variant-numeric:tabular-nums}
.vl-roll li.me .vl-av{background:var(--sun);color:var(--sun-ink)}
.vl-me-tools{justify-content:space-between}

/* org post form */
.vl-orgf{max-width:780px}
.vl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.vl-span{grid-column:1/-1}

/* hover only for real pointers */
@media (hover:hover) and (pointer:fine){
  .vl-opp:hover{border-color:var(--brand)}
  .vl-opp:hover h3{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:.18em}
  .vl-chip:hover,.vl-tick:hover span{border-color:var(--brand)}
  .vl-tab:hover{color:var(--fg)}
  .vl-x:hover{border-color:var(--brand);color:var(--brand)}
  .vl-link:hover{text-decoration-thickness:2px}
}

/* phones */
@media (max-width:720px){
  .vl-stats dd{font-size:26px}
  .vl-tabs{margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
  .vl-tab{padding:0 12px;font-size:15px}
  .vl-frow{flex-direction:column;align-items:stretch;gap:6px}
  .vl-scroll{margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));scroll-snap-type:x proximity}
  .vl-scroll .vl-chip{scroll-snap-align:start}
  .vl-frow2{display:grid;gap:10px}
  .vl-opps{grid-template-columns:1fr}
  .vl-orgs,.vl-me,.vl-grid{grid-template-columns:1fr}
  .vl-cta .btn{width:100%;justify-content:center}
  .vl-logf{grid-template-columns:1fr 1fr}
  .vl-logf label:first-child{grid-column:1/-1}
  .vl-logf .btn{grid-column:1/-1}
  .vl-ring{width:112px;height:112px}
  .vl-badges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vl-steps{flex-wrap:wrap}
  .vl-app{grid-template-columns:1fr}
  .vl-facts > div{grid-template-columns:20px 1fr}
  .vl-facts dd{grid-column:2}

  /* bottom sheet */
  .vl-sheet{width:100%;max-width:none;margin:auto 0 0;border-radius:var(--r-card) var(--r-card) 0 0;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom,0px)}
  .vl-sheet[open]{animation:vl-up 280ms cubic-bezier(.2,.8,.2,1)}
  .vl-sh{padding:8px 16px 24px}
  .vl-grab{display:block;justify-self:center;width:40px;height:5px;border-radius:99px;background:var(--line);margin-bottom:4px}
  .vl-submit{justify-self:stretch;justify-content:center}
}
@keyframes vl-up{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){
  .vl-sheet[open]{animation:none}
  .vl-ring-fg{transition:none}
}